Jquery 动画函数的小问题

发布于 2024-10-28 19:29:29 字数 515 浏览 1 评论 0原文

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

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

当用户将鼠标悬停在触发范围区域 () 上时，掩码 (

) 向左滑动。当用户将鼠标移离触发区域时，遮罩会返回到原来的位置。

它工作完美。

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

有谁知道有什么方法可以防止这种情况发生吗？

原文

I'm using this Jquery animate function:

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

When a user hovers over the trigger span area (<span id="trigger">), the mask (<div id="mask">) slides left. The mask then returns to position when a user moves his mouse away from the trigger region.

It works perfectly.

However, if a user's mouse is hovered over the trigger span area when the page loads, the mask slides in reverse, that is, while the user hovers over the trigger span, it slides into position. When s/he moves away from the trigger region, the mask slides left.

Does anyone know of a way to prevent this from happening?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

孤芳又自赏 2024-11-04 19:29:29

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

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

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

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

The problem is that you are using 'toggle' and a single handler. So the toggle occurs on mouse enter and mouse exit. If you start in the trigger div, exiting makes it toggle the first time.

To fix this, use two handlers:

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

Of course, you have to have the width of your #mask. If it is variable, you can still work around this.

回复收藏 0 原文

~没有更多了~