Javascript Jquery简单鱼眼脚本中鼠标悬停的敏感度

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

最小气泡

将气泡返回到其默认大小

最大化气泡

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

我还编写了下一个代码： 我知道本例中的.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();
    });

});​

（我的代码有一个问题：）

问题是，正如你在上所看到的：那 当你把鼠标移到下一个泡泡时，所有的泡泡都开始“发疯”

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

2.我如何解决它

---

3.您对如何改进我的代码有什么建议吗（例如：不要使用

each（）

）？

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

使现代化 这会更好，但可能不是你想要做的

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

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

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

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

我更新了我的代码：，我删除了绝对位置，但它仍然会导致问题。你有什么建议吗？

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

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

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