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

发布于 2024-11-14 20:35:09 字数 918 浏览 9 评论 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).

分享到QQ

分享到微博

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

发布评论

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

您的好友蓝忘机已上羡 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 :{

回复收藏 0 原文

~没有更多了~