Jquery简单FishEye脚本中mouseOver的敏感性

Posted 2023-02-25

【中文标题】Jquery简单FishEye脚本中mouseOver的敏感性

【英文标题】：Sensitivity of mouseOver in a Jquery simple FishEye script

【发布时间】：2012-03-06 20:21:40

【问题描述】：

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

最小化气泡

将气泡恢复为默认大小

最大化气泡

使气泡更大，更高，并同时显示另一张图片（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()）？

【参考方案1】：

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

更新

这效果更好，但可能不是您想要做的事情

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

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

    $(this).minimizeBubble();
);

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

【讨论】：

我更新了我的代码：jsfiddle.net/T7gCL/5，我删除了绝对位置，但它会导致问题。你有什么建议吗？