jQuery UI - addClass removeClass - CSS 值被卡住答案

【问题标题】：jQuery UI - addClass removeClass - CSS values are stuckjQuery UI - addClass removeClass - CSS 值被卡住
【发布时间】：2011-02-08 14:26:00
【问题描述】：

我正在尝试做一个简单的动画。

您显示 div。动画正确。
您隐藏了 div。正确。
您再次显示 div。它显示但没有动画。它停留在您第一次中断它时的值。

因此，在 [add|remove]Class 期间发生的插值 CSS 不知何故卡在那里。第二次，[add|remove]Class 实际上正在运行，但是它从类中设置的 css 被忽略了（我认为被掩盖了）。如何在不使用 .animate 和硬编码样式值的情况下解决此问题？重点是将动画结束点放在 css 类中。

谢谢！

<!doctype html>

<style type="text/css">
div {
    width: 400px;
    height: 200px;
}
.green {
    background-color: green;
}
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
    $('#show').bind({
        click: function() {
            showAndRun()
        }
    })
    $('#hide').bind({
        click: function() {
            $('div').stop(true, false).fadeOut('slow')
        }
    })

    function showAndRun() {
        function pulse() {
            $('div').removeClass('green', 2000, function() {
                $(this).addClass('green', 2000, pulse)
            })
        }
        $('div').stop(true, false).hide().addClass('green').fadeIn('slow', pulse)
    }
})
</script>

<input id="show" type="button" value="show" /><input id="hide" type="button" value="hide" />
<div style="display: none;"></div>

你也可以看看它做了什么here at jsbin

【问题讨论】：

@Jason 我在 jsbin 添加的链接正确吗？这听起来像你描述的问题。
是的，这准确反映了我的问题，谢谢。

标签： jquery-ui jquery-animate

【解决方案1】：

我想出了解决办法。不确定我是否对此感到满意。当点击show 时，它本质上是一个非常糟糕的 CSS“重置”

动画永远循环。所以我不能依赖 jQuery 队列（有限长度）。我必须通过回调实现循环，如代码所示。导致的问题：你不能 .stop(true, true) 。第一个 true 清除队列，但在当前运行的动画之后队列中没有任何内容。所以这是没用的。第二个 true 跳转到队列中的最后一个动画。再次无用，因为我们实际上将停留在自循环的一件事上。第二个参数必须是 false 才能中断无限循环。

中断问题。它将css留在原处。现在，无论您的动画插值是什么（在我的例子中是 background-color），您现在都被随机的 css 道具卡住了。我也希望中断是即时的。所以没有别的办法。

在我的例子中，动画期间的background-color 被设置为element.style（通过浏览器工具中的检查发现），它覆盖了正在发生的任何其他事情。在第一个动画开始运行之前，这个道具并不存在。然后它被打断了，应该是临时的风格卡在那里（我猜）。

所以你再次运行动画。应用绿色类。 jQuery 计算出要通过的颜色范围。原来它是从#shadeofgreen 到#thesameshadeofgreen，因为卡住的element.styles 值会覆盖该类提供的任何内容。所以动画在两个相同颜色之间滑动。它正在运行！但是没有颜色可以改变。

所以在我的情况下修复并不可怕，但我仍然不确定我是否喜欢它，因为我不确定它是否可以轻松应用于各种情况。

改变

$('div').stop(true, false).hide().addClass('green').fadeIn('slow', pulse)

到

$('div').stop(true, false).removeAttr('style').hide().addClass('green').fadeIn('slow', pulse)

关键是

.removeAttr('style').hide().addClass('green')

这本质上是您的 css 重置。保证在您需要时始终在您身边，因为它恰好在该事物再次显示之前发生。

请注意，将!important 放在green css 类中的颜色上是行不通的，因为这（似乎）将覆盖element.styles（jQuery 动画使用的），并且您不会得到想要的结果。

当然，我仍然愿意接受建议。我可能错过了一些东西，因为我只是在一周的顶部才开始研究 CSS 和 jQuery。

在固定代码here on jsbin中可以看到.removeAttr('style')的效果。

【讨论】：