jQuery UI - addClass removeClass - CSS 值被卡住
Posted
技术标签:
【中文标题】jQuery UI - addClass removeClass - CSS 值被卡住【英文标题】：jQuery UI - addClass removeClass - CSS values are stuck 【发布时间】：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 添加的链接正确吗？这听起来像你描述的问题。 是的，这准确反映了我的问题，谢谢。 【参考方案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')的效果。
【讨论】：
以上是关于jQuery UI - addClass removeClass - CSS 值被卡住的主要内容，如果未能解决你的问题，请参考以下文章
Jquery ui 1.8.10 范围滑块不适用于 jquery 3.4.1
jQuery .addClass() 和 SVG 元素 [重复]