0

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

最小化气泡

将气泡恢复为默认大小

最大化气泡

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

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()）？

4

1 回答 1

0

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

更新

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

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

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

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

您仍然需要修改在其包含的 div 中组织图像的方式

于 2012-03-06T21:22:17.887 回答