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

Question

我正在使用jQuery在hover()上设置高度变化的动画.

在悬停时,它将应用.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')的地方.触发器('mouseout')将解决这个问题,但它对我不起作用.这是一个重现问题的例子:http: //jsfiddle.net/Qc42v/

---

更新: 提交一张票,结果证明这是一个jQuery错误.相同的代码适用于jQuery 1.5(以及最新版本的jQuery UI).

Answer 1

这可能是一个合法的 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() 函数？不过，肯定有人应该提交错误：{