小 Jquery 动画功能问题

Posted 2023-05-08

【中文标题】小 Jquery 动画功能问题

【英文标题】：Small Jquery animate function issue

【发布时间】：2011-07-28 00:51:06

【问题描述】：

我正在使用这个 Jquery 动画函数：

$(document).ready(function() 
    $("#trigger").hover(function() 
        $("#mask").animate(            
    width: 'toggle', left: '+=0', 250, 'easeout');
    );
);

当用户将鼠标悬停在触发范围区域 (<span id="trigger">) 上时，掩码 (<div id="mask">) 会向左滑动。然后，当用户将鼠标移离触发区域时，遮罩会返回原位。

完美运行。

但是，如果在页面加载时用户的鼠标悬停在触发跨度区域上，则遮罩会反向滑动，也就是说，当用户将鼠标悬停在触发跨度上时，它会滑动到位。当她/他离开触发区域时，遮罩会向左滑动。

有人知道防止这种情况发生的方法吗？

【参考方案1】：

问题在于您使用的是“切换”和单个处理程序。所以切换发生在鼠标进入和鼠标退出时。如果您从触发器 div 开始，退出会使其第一次切换。

要解决此问题，请使用两个处理程序：

$(document).ready(function() 
    $("#trigger").hover(function() 
        $("#mask").animate(
            width: '0px',
        , 250, 'easeout');
    ,function() 
        $("#mask").animate(
            width: '100px',
        , 250, 'easeout');
    );
);

当然，你必须有#mask 的宽度。如果它是可变的，您仍然可以解决这个问题。

【讨论】：

这完全正确。在你打败我之前，我只是在小提琴上测试它。只是测试时的观察，使用静态值而不是toggle 设置动画宽度不会隐藏元素（如果它有边框，当它达到 0 时它们仍会显示）。至少问题已被查明，并且 OP 应该能够从这里找到它。投票赞成

正如法国人所说，你们是“最好的”。非常感谢您的帮助。