我正在使用jQuery和jQuery-ui,并希望为各种对象设置各种属性的动画。
为了在此说明问题,我将其简化为一个div,当用户将鼠标悬停在其上时,该分区从蓝色变为红色。
使用时我可以得到想要的行为animate(),但是这样做时,我要设置动画的样式必须在动画代码中,因此与样式表是分开的。(请参见 示例1 )
animate()
一种替代方法是使用addClass(),removeClass()但是我无法重新创建可以得到的确切行为animate()。(请参见 示例2 )
addClass()
removeClass()
让我们看一下我拥有的代码animate():
$('#someDiv') .mouseover(function(){ $(this).stop().animate( {backgroundColor:'blue'}, {duration:500}); }) .mouseout(function(){ $(this).stop().animate( {backgroundColor:'red'}, {duration:500}); });
它显示了我正在寻找的所有行为:
但是,由于定义了样式更改,因此animate()我必须在此处更改样式值,而不能仅将其指向我的样式表。定义样式的位置的“碎片化”确实让我感到困扰。
这是我目前使用addClass()和的最佳尝试removeClass(请注意,要使动画正常工作,您需要jQuery-ui):
removeClass
//assume classes 'red' and 'blue' are defined $('#someDiv') .addClass('blue') .mouseover(function(){ $(this).stop(true,false).removeAttr('style').addClass('red', {duration:500}); }) .mouseout(function(){ $(this).stop(true,false).removeAttr('style').removeClass('red', {duration:500}); });
这同时显示了我的原始需求的属性1.和2.,但是3不起作用。
我了解原因:
进行动画制作时addClass(),removeClass()jQuery将临时样式添加到元素,然后递增适当的值,直到它们达到所提供类的值,然后才实际添加/删除该类。
因此,我必须删除样式属性,否则,如果动画停止一半,样式属性将保留并永久覆盖任何类值,因为标记中的样式属性比类样式具有更高的重要性。
但是,当动画进行到一半时,它尚未添加新类,因此,使用此解决方案,当用户在动画完成之前移动鼠标时,颜色会跳到先前的颜色。
我理想地想要做的是这样的事情:
$('#someDiv') .mouseover(function(){ $(this).stop().animate( getClassContent('blue'), {duration:500}); }) .mouseout(function(){ $(this).stop().animate( getClassContent('red'), {duration:500}); });
哪里getClassContent会返回所提供类的内容。关键点在于,这样我不必到处都保留样式定义,而可以将它们保留在样式表的类中。
getClassContent
由于您不必担心IE,为什么不使用CSS过渡来提供动画和jQuery来更改类。实时示例:http://jsfiddle.net/tw16/JfK6N/
#someDiv{ -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; }