Sensitivity of mouseOver in a Jquery simple FishEye script

Question

After having troubles with a jquery fisheye plugin I've decided to develop a similiar script by myself. (It's also a good practice). Anyway , I wrote 2 jquery functions based on the Animate() function.

minimizeBubble

return the bubble to its default size

maximizeBubble

make the bubble bigger , higher and display another picture as well (a title for that bubble)

jQuery.fn.maximizeBubble = function(){
  $(this).animate({
    marginTop: '-300px',
    width: '300px',
  }, {
    duration: 200,
    specialEasing: {
      width: 'linear',
    },
    complete: function() {
    $(this).find("span").css("display" , "inline");
    }
  });
}

jQuery.fn.minimizeBubble = function(){

     $(this).animate({
                //top: '+=5',
                marginTop: '0',
                width: '80px',
              }, {
                duration: 100,
                specialEasing: {
                  width: 'linear',
                },
                complete: function() {
                    $(this).find("span").css("display" , "none");
                }
              });

}

I also wrote the next code: I know that the .each() function in this case is not neccessery because there's only one big bubble at a time.

$(document).ready(function() {

    //First , the middle one will be big as default.
    $('#auto_big').maximizeBubble();

    //mouseOver - make it big , onMouseout - Stay Big (do nothing)
    $('.dock-item2').mouseover(function() {
        //mouseOver on another bubble- minimize the other one and maximize the current
        $('.dock-item2').each(function(){
            $(this).minimizeBubble();
        });
        $(this).maximizeBubble();
    });

});​

(A jsFiffle for my code: http://jsfiddle.net/T7gCL/1/)

The problem , as you can see at: http://jsfiddle.net/T7gCL/1/embedded/result/ that when you move your mouse to the next bubble , all the bubbles are starting to "get crazy".

1.Do you know what's the reason for this behaviour?

2.How can I solve it?

3.do you have any suggestions of how to improve my code (for instance: instead of each())?

Answer 1

Part of the reason there is so much hopping around is that you're positioning the images absolutely and then resizing them. I'm not sure what the application calls for but I would try floating them for now. The animation behavior is like a chain reaction which makes me draw the hypothesis that when the image resizes it is propagating the onMouseover event to the images it is overlapping. The floating layout may fix this.

Update

This works better but might not be exactly what you're trying to do

$('.dock-item2').mouseenter(function(event) {
     event.stopPropagation()           

    $(this).maximizeBubble();
});
$('.dock-item2').mouseleave(function(event) {
     event.stopPropagation()           

    $(this).minimizeBubble();
});

You still need to rework the way you're organizing the images in their containing div