小 Jquery 动画功能问题

Question

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

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

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

完美运行。

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

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

Answer 1

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

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

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

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