猿问
下载APP

如何通过javascript / jQuery从CSS类中获取样式属性?

如何通过javascript / jQuery从CSS类中获取样式属性?

如何通过jQuery从CSS类访问属性?我有一个CSS类,如:

.highlight { 
    color: red; }

我需要在对象上做一个颜色动画:

$(this).animate({
    color: [color of highlight class]}, 750);

所以我可以red改为blue(在CSS中),我的动画将按照我的CSS工作。

一种方法是在highlight类中放置一个不可见的元素,然后获取要在动画中使用的元素的颜色,但我想这是一个非常非常糟糕的做法。

有什么建议?


幕布斯7119047
浏览 90回答 3
3回答

慕勒3428872

我写了一个小函数遍历文档中的样式表,寻找匹配的选择器,然后是样式。有一点需要注意,这只适用于使用样式标记定义的样式表或来自同一域的外部表单。如果纸张已知,您可以将其传递出去,并且不必查看多张纸(更快,如果您有冲突规则,则更准确)。我只在jsFiddle上测试了一些弱测试用例,让我知道这是否适合你。function&nbsp;getStyleRuleValue(style,&nbsp;selector,&nbsp;sheet)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;sheets&nbsp;=&nbsp;typeof&nbsp;sheet&nbsp;!==&nbsp;'undefined'&nbsp;?&nbsp;[sheet]&nbsp;:&nbsp;document.styleSheets; &nbsp;&nbsp;&nbsp;&nbsp;for&nbsp;(var&nbsp;i&nbsp;=&nbsp;0,&nbsp;l&nbsp;=&nbsp;sheets.length;&nbsp;i&nbsp;<&nbsp;l;&nbsp;i++)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;sheet&nbsp;=&nbsp;sheets[i]; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(&nbsp;!sheet.cssRules&nbsp;)&nbsp;{&nbsp;continue;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for&nbsp;(var&nbsp;j&nbsp;=&nbsp;0,&nbsp;k&nbsp;=&nbsp;sheet.cssRules.length;&nbsp;j&nbsp;<&nbsp;k;&nbsp;j++)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;rule&nbsp;=&nbsp;sheet.cssRules[j]; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(rule.selectorText&nbsp;&&&nbsp;rule.selectorText.split(',').indexOf(selector)&nbsp;!==&nbsp;-1)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;rule.style[style]; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;null;}示例用法:var&nbsp;color&nbsp;=&nbsp;getStyleRuleValue('color',&nbsp;'.foo');&nbsp;//&nbsp;searches&nbsp;all&nbsp;sheets&nbsp;for&nbsp;the&nbsp;first&nbsp;.foo&nbsp;rule&nbsp;and&nbsp;returns&nbsp;the&nbsp;set&nbsp;color&nbsp;style.var&nbsp;color&nbsp;=&nbsp;getStyleRuleValue('color',&nbsp;'.foo',&nbsp;document.styleSheets[2]);编辑:我忽略了考虑分组规则。我将选择器检查更改为:if&nbsp;(rule.selectorText.split(',').indexOf(selector)&nbsp;!==&nbsp;-1)&nbsp;{现在它将检查分组规则中的任何选择器是否匹配。

紫衣仙女

由于您已经在使用jQuery,请尝试使用jQuery-ui的函数switchClass,该函数允许您为这种新颜色设置动画。例如:&nbsp;$('div').switchClass(&nbsp;"",&nbsp;"highlight",&nbsp;1000&nbsp;);演示如果你不想在这里包含整个&nbsp;UI库,那么他们使用的是代码:switchClass:&nbsp;function(&nbsp;remove,&nbsp;add,&nbsp;speed,&nbsp;easing,&nbsp;callback)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;$.effects.animateClass.call(&nbsp;this,&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;add:&nbsp;add, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;remove:&nbsp;remove&nbsp;&nbsp;&nbsp;&nbsp;},&nbsp;speed,&nbsp;easing,&nbsp;callback&nbsp;);}和animateClass fn:var&nbsp;classAnimationActions&nbsp;=&nbsp;[&nbsp;"add",&nbsp;"remove",&nbsp;"toggle"&nbsp;], &nbsp;&nbsp;&nbsp;&nbsp;shorthandStyles&nbsp;=&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border:&nbsp;1, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;borderBottom:&nbsp;1, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;borderColor:&nbsp;1, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;borderLeft:&nbsp;1, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;borderRight:&nbsp;1, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;borderTop:&nbsp;1, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;borderWidth:&nbsp;1, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin:&nbsp;1, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;padding:&nbsp;1 &nbsp;&nbsp;&nbsp;&nbsp;};function&nbsp;styleDifference(&nbsp;oldStyle,&nbsp;newStyle&nbsp;)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;diff&nbsp;=&nbsp;{}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name,&nbsp;value; &nbsp;&nbsp;&nbsp;&nbsp;for&nbsp;(&nbsp;name&nbsp;in&nbsp;newStyle&nbsp;)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value&nbsp;=&nbsp;newStyle[&nbsp;name&nbsp;]; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(&nbsp;oldStyle[&nbsp;name&nbsp;]&nbsp;!==&nbsp;value&nbsp;)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(&nbsp;!shorthandStyles[&nbsp;name&nbsp;]&nbsp;)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(&nbsp;$.fx.step[&nbsp;name&nbsp;]&nbsp;||&nbsp;!isNaN(&nbsp;parseFloat(&nbsp;value&nbsp;)&nbsp;)&nbsp;)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;diff[&nbsp;name&nbsp;]&nbsp;=&nbsp;value; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;diff;}function&nbsp;getElementStyles(&nbsp;elem&nbsp;)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;key,&nbsp;len, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;style&nbsp;=&nbsp;elem.ownerDocument.defaultView&nbsp;? &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elem.ownerDocument.defaultView.getComputedStyle(&nbsp;elem,&nbsp;null&nbsp;)&nbsp;: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elem.currentStyle, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;styles&nbsp;=&nbsp;{}; &nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(&nbsp;style&nbsp;&&&nbsp;style.length&nbsp;&&&nbsp;style[&nbsp;0&nbsp;]&nbsp;&&&nbsp;style[&nbsp;style[&nbsp;0&nbsp;]&nbsp;]&nbsp;)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;len&nbsp;=&nbsp;style.length; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;while&nbsp;(&nbsp;len--&nbsp;)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;key&nbsp;=&nbsp;style[&nbsp;len&nbsp;]; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(&nbsp;typeof&nbsp;style[&nbsp;key&nbsp;]&nbsp;===&nbsp;"string"&nbsp;)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;styles[&nbsp;$.camelCase(&nbsp;key&nbsp;)&nbsp;]&nbsp;=&nbsp;style[&nbsp;key&nbsp;]; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;support:&nbsp;Opera,&nbsp;IE&nbsp;<9 &nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;else&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for&nbsp;(&nbsp;key&nbsp;in&nbsp;style&nbsp;)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(&nbsp;typeof&nbsp;style[&nbsp;key&nbsp;]&nbsp;===&nbsp;"string"&nbsp;)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;styles[&nbsp;key&nbsp;]&nbsp;=&nbsp;style[&nbsp;key&nbsp;]; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;styles;}$.effects.animateClass&nbsp;=&nbsp;function(&nbsp;value,&nbsp;duration,&nbsp;easing,&nbsp;callback&nbsp;)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;o&nbsp;=&nbsp;$.speed(&nbsp;duration,&nbsp;easing,&nbsp;callback&nbsp;); &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;this.queue(&nbsp;function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;animated&nbsp;=&nbsp;$(&nbsp;this&nbsp;), &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;baseClass&nbsp;=&nbsp;animated.attr(&nbsp;"class"&nbsp;)&nbsp;||&nbsp;"", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;applyClassChange, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;allAnimations&nbsp;=&nbsp;o.children&nbsp;?&nbsp;animated.find(&nbsp;"*"&nbsp;).addBack()&nbsp;:&nbsp;animated; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;map&nbsp;the&nbsp;animated&nbsp;objects&nbsp;to&nbsp;store&nbsp;the&nbsp;original&nbsp;styles. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;allAnimations&nbsp;=&nbsp;allAnimations.map(function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;el&nbsp;=&nbsp;$(&nbsp;this&nbsp;); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;el:&nbsp;el, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;start:&nbsp;getElementStyles(&nbsp;this&nbsp;) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;apply&nbsp;class&nbsp;change &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;applyClassChange&nbsp;=&nbsp;function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$.each(&nbsp;classAnimationActions,&nbsp;function(i,&nbsp;action)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(&nbsp;value[&nbsp;action&nbsp;]&nbsp;)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;animated[&nbsp;action&nbsp;+&nbsp;"Class"&nbsp;](&nbsp;value[&nbsp;action&nbsp;]&nbsp;); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;applyClassChange(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;map&nbsp;all&nbsp;animated&nbsp;objects&nbsp;again&nbsp;-&nbsp;calculate&nbsp;new&nbsp;styles&nbsp;and&nbsp;diff &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;allAnimations&nbsp;=&nbsp;allAnimations.map(function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.end&nbsp;=&nbsp;getElementStyles(&nbsp;this.el[&nbsp;0&nbsp;]&nbsp;); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.diff&nbsp;=&nbsp;styleDifference(&nbsp;this.start,&nbsp;this.end&nbsp;); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;this; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;apply&nbsp;original&nbsp;class &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;animated.attr(&nbsp;"class",&nbsp;baseClass&nbsp;); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;map&nbsp;all&nbsp;animated&nbsp;objects&nbsp;again&nbsp;-&nbsp;this&nbsp;time&nbsp;collecting&nbsp;a&nbsp;promise &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;allAnimations&nbsp;=&nbsp;allAnimations.map(function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;styleInfo&nbsp;=&nbsp;this, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dfd&nbsp;=&nbsp;$.Deferred(), &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;opts&nbsp;=&nbsp;$.extend({},&nbsp;o,&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;queue:&nbsp;false, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;complete:&nbsp;function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dfd.resolve(&nbsp;styleInfo&nbsp;); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.el.animate(&nbsp;this.diff,&nbsp;opts&nbsp;); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;dfd.promise(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;once&nbsp;all&nbsp;animations&nbsp;have&nbsp;completed: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$.when.apply(&nbsp;$,&nbsp;allAnimations.get()&nbsp;).done(function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;set&nbsp;the&nbsp;final&nbsp;class &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;applyClassChange(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;for&nbsp;each&nbsp;animated&nbsp;element, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;clear&nbsp;all&nbsp;css&nbsp;properties&nbsp;that&nbsp;were&nbsp;animated &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$.each(&nbsp;arguments,&nbsp;function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;el&nbsp;=&nbsp;this.el; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$.each(&nbsp;this.diff,&nbsp;function(key)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;el.css(&nbsp;key,&nbsp;""&nbsp;); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;this&nbsp;is&nbsp;guarnteed&nbsp;to&nbsp;be&nbsp;there&nbsp;if&nbsp;you&nbsp;use&nbsp;jQuery.speed() &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;it&nbsp;also&nbsp;handles&nbsp;dequeuing&nbsp;the&nbsp;next&nbsp;anim... &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;o.complete.call(&nbsp;animated[&nbsp;0&nbsp;]&nbsp;); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;});};工作小提琴所需的所有功能:http://jsfiddle.net/maniator/3C5ZQ/

交互式爱情

我想到的唯一解决方案如下://create&nbsp;an&nbsp;element&nbsp;with&nbsp;this&nbsp;class&nbsp;and&nbsp;append&nbsp;it&nbsp;to&nbsp;the&nbsp;DOMvar&nbsp;eleToGetColor&nbsp;=&nbsp;$('<div&nbsp;class="highlight"&nbsp;style="display:&nbsp;none;">').appendTo('body');//get&nbsp;the&nbsp;color&nbsp;of&nbsp;the&nbsp;elementvar&nbsp;color&nbsp;=&nbsp;eleToGetColor.css('color');//completly&nbsp;remove&nbsp;the&nbsp;element&nbsp;from&nbsp;the&nbsp;DOMeleToGetColor.remove();$("div").animate({ &nbsp;&nbsp;//set&nbsp;the&nbsp;new&nbsp;color &nbsp;&nbsp;color:&nbsp;color,},&nbsp;1000);.highlight&nbsp;{ &nbsp;&nbsp;color:&nbsp;red;}div&nbsp;{ &nbsp;&nbsp;width:&nbsp;200px; &nbsp;&nbsp;height:&nbsp;100px; &nbsp;&nbsp;color:&nbsp;blue; &nbsp;&nbsp;font-size:&nbsp;6em; &nbsp;&nbsp;font-weight:&nbsp;bold;}<script&nbsp;src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><link&nbsp;rel="stylesheet"&nbsp;href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css"&nbsp;/><script&nbsp;src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script><div>TEST</div>
打开App,查看更多内容
随时随地看视频慕课网APP
我要回答