jQuery UI - addClass removeClass - CSS值卡住

我正在尝试做一个简单的动画。jQuery UI - addClass removeClass - CSS值卡住

您显示div。它动画正确。
您可以隐藏div。正确。
您再次显示div。它显示，但没有动画。它被卡在当你第一次打断它的价值。

所以不知何故，在[add | remove]类中发生的插值CSS在那里卡住了。第二次，[add | remove]类实际上正在运行，但是它从该类设置的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

来源

2010-04-15 Jason Dunkelberger

@Jason是我在jsbin中添加的链接是否正确？这听起来像你描述的问题。 – Earlz 2010-04-15 21:54:03

是的，这是我的问题的准确反映，谢谢。 – 2010-04-15 22:27:52

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

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

中断的问题。它离开了CSS它在哪里。无论您的动画是通过哪种方式进行插值，您现在都会随机使用css道具（在我的案例中为background-color）。我也希望中断是即时的。所以没有其他办法。

在我的情况下，动画期间的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重置。保证在你需要时始终在那里，因为它正好发生在事情再次显示之前。

注意，在该CSS类的颜色把!important，是不行的，因为这（似乎）将覆盖element.styles（其中jQuery的动画使用），你不会得到想要的结果。

当然我仍然乐于接受建议。我可能错过了一些东西，因为我只在一周之前开始关注CSS和jQuery。

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

来源

2010-04-15 22:50:35

jQuery UI - addClass removeClass - CSS值卡住

回答

相关问题