Question

在使用jquery鱼眼插件遇到麻烦后，我决定自己开发一个类似的脚本。（这也是一个很好的做法）。无论如何，我基于Animate（）函数编写了2个jquery函数。

minimizeBubble

将气泡恢复为默认大小

maximizeBubble

使气泡更大，更高，并显示另一张照片（a 该泡沫的标题）

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");
                }
              });

}

我还写了下一段代码：我知道在这种情况下.each（）函数不是必需的，因为一次只有一个大泡沫。

$(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();
    });

});

（我的代码是一个jsFiffle：http://jsfiddle.net/T7gCL/1/）

问题，你可以在http://jsfiddle.net/T7gCL/1/embedded/result/看到当你将鼠标移动到下一个气泡时，所有的气泡都开始变得“疯狂”。

1.你知道这种行为的原因是什么吗？

2.我该如何解决？

3.您对如何改进我的代码有任何建议（例如：代替each()）？

Answer 1

有很多跳跃的部分原因是你绝对定位图像然后调整它们的大小。我不确定应用程序要求的是什么，但我现在会尝试浮动它们。动画行为就像一个连锁反应，这让我得出这样的假设：当图像调整大小时，它会将onMouseover事件传播到它重叠的图像。浮动布局可以解决这个问题。

更新

这样做效果更好，但可能不是你想要做的

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

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

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

您仍然需要按照在包含div中组织图像的方式进行返工

在Jquery简单的FishEye脚本中mouseOver的灵敏度

1 个答案:

更新