href() 中的 jQuery 动画仅在第二次触发

发布于 2024-11-14 20:35:09 字数 918 浏览 2 评论 0 原文

我正在使用 jQuery 为悬停()上的高度变化设置动画。

悬停时,它将应用 .hover 类,单击时,它将切换 .expanded 类。它基本上可以工作,并具有适当的动画,但仅在第一次之后才有效。第一次悬停将完全跳过动画。

我很困惑 - 这是有问题的代码:

$('#expandingbox').hover(

    /*on mouseenter, if not expanded, add hover class*/
    function() {
    if (!$(this).hasClass("expanded")) {
        $(this).stop(true, true).addClass("hover", "slow");
    }},

    /*on mouseout, if not expanded, remove hover class*/
    function() {
    if (!$(this).hasClass("expanded")) {
        $(this).stop(true, true).removeClass("hover", "slow");
    }
}).click(function() {
    $(this).toggleClass("expanded", "slow");
});

我发现在某个地方添加 $('#expandingbox').trigger('mouseout') 可以解决这个问题,但它对我不起作用。 这是重现该问题的示例: http://jsfiddle.net/Qc42v/


更新: 提交了一张票,结果发现这是一个 jQuery bug。相同的代码适用于 jQuery 1.5(以及最新版本的 jQuery UI)。

I'm using jQuery to animate a height change on hover().

Upon hover, it'll apply a .hover class, and upon clicking, it'll toggle a .expanded class. It mostly works, with proper animation, but only after the first time. The first time hover will skip the animation entirely.

I'm stumped - here's the offending code:

$('#expandingbox').hover(

    /*on mouseenter, if not expanded, add hover class*/
    function() {
    if (!$(this).hasClass("expanded")) {
        $(this).stop(true, true).addClass("hover", "slow");
    }},

    /*on mouseout, if not expanded, remove hover class*/
    function() {
    if (!$(this).hasClass("expanded")) {
        $(this).stop(true, true).removeClass("hover", "slow");
    }
}).click(function() {
    $(this).toggleClass("expanded", "slow");
});

I found somewhere that adding $('#expandingbox').trigger('mouseout') will fix this problem, but it didn't work for me.
And here's an example reproducing the problem:
http://jsfiddle.net/Qc42v/


UPDATE:
Submitted a ticket, and it turns out it's a jQuery bug. The same code works with jQuery 1.5 (and the latest version of jQuery UI).

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

扫码二维码加入Web技术交流群

发布评论

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

评论(1

您的好友蓝忘机已上羡 2024-11-21 20:35:09

这可能是一个合法的 jQuery UI 错误。预先添加一些随机类似乎可以为我解决这个问题。检查: http://jsfiddle.net/Qc42v/9/

所以基本上是这样的:

/*on mouseenter, if not expanded, add hover class*/
function() {
if (!$(this).hasClass("expanded")) {
    $(this).addClass("xxx");
    $(this).stop(true, true).addClass("hover", "slow");
}},

如果这看起来对你来说太恶心了,也许只使用基本的 animate() 函数?不过,肯定有人应该提交错误:{

This might be a legit jQuery UI bug. Adding some random class beforehand seems to fix it for me. Check: http://jsfiddle.net/Qc42v/9/

So basically like this:

/*on mouseenter, if not expanded, add hover class*/
function() {
if (!$(this).hasClass("expanded")) {
    $(this).addClass("xxx");
    $(this).stop(true, true).addClass("hover", "slow");
}},

If this looks too yucky for you, maybe just use the basic animate() function? Someone should definitely file a bug though :{

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文