Question

我正在使用这个Jquery动画功能：

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

当用户将鼠标悬停在触发范围区域（<span id="trigger">）上时，掩码（<div id="mask">）向左滑动。当用户将鼠标移离触发区域时，掩码返回到位置。

完美无缺。

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

有没有人知道如何防止这种情况发生？

Answer 1

问题是你正在使用'toggle'和一个处理程序。因此，在鼠标输入和鼠标退出时会发生切换。如果你从触发器div开始，退出使它第一次切换。

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

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

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

小Jquery动画功能问题

1 个答案: