jQuery动画功能的愚蠢问题
Stupid issue with animate function of jQuery
抱歉英语不好。
jQuery的animate函数在第2行运行良好。但在3号线不起作用。。。为什么?
$('.opac').hover(function(){
$('img', this).animate({opacity: '0.6'}, 500);
$('p', this).animate({background: 'orange'}, 500);
});
HTML是这样的:
<div class="opac">
<img src="image.png" />
<p class="fot">text here...</p>
</div>
谢谢!ps:开发者工具没有给出任何错误。。。
jQuery不支持本机设置颜色动画。这里有一个快速插件可以包含在你的代码库中:
发件人http://www.bitstorm.org/jquery/color-animation/
(function(a){function b(){var b=a("script:first"),c=b.css("color"),d=!1;if(/^rgba/.test(c))d=!0;else try{d=c!=b.css("color","rgba(0, 0, 0, 0.5)").css("color"),b.css("color",c)}catch(e){}return d}function c(b,c,d){var e="rgb"+(a.support.rgba?"a":"")+"("+parseInt(b[0]+d*(c[0]-b[0]),10)+","+parseInt(b[1]+d*(c[1]-b[1]),10)+","+parseInt(b[2]+d*(c[2]-b[2]),10);return a.support.rgba&&(e+=","+(b&&c?parseFloat(b[3]+d*(c[3]-b[3])):1)),e+=")"}function d(a){var b,c;return(b=/#([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})/.exec(a))?c=[parseInt(b[1],16),parseInt(b[2],16),parseInt(b[3],16),1]:(b=/#([0-9a-fA-F])([0-9a-fA-F])([0-9a-fA-F])/.exec(a))?c=[17*parseInt(b[1],16),17*parseInt(b[2],16),17*parseInt(b[3],16),1]:(b=/rgb'('s*([0-9]{1,3})'s*,'s*([0-9]{1,3})'s*,'s*([0-9]{1,3})'s*')/.exec(a))?c=[parseInt(b[1]),parseInt(b[2]),parseInt(b[3]),1]:(b=/rgba'('s*([0-9]{1,3})'s*,'s*([0-9]{1,3})'s*,'s*([0-9]{1,3})'s*,'s*([0-9'.]*)'s*')/.exec(a))&&(c=[parseInt(b[1],10),parseInt(b[2],10),parseInt(b[3],10),parseFloat(b[4])]),c}a.extend(!0,a,{support:{rgba:b()}});var e=["color","backgroundColor","borderBottomColor","borderLeftColor","borderRightColor","borderTopColor","outlineColor"];a.each(e,function(b,e){a.Tween.propHooks[e]={get:function(b){return a(b.elem).css(e)},set:function(b){var f=b.elem.style,g=d(a(b.elem).css(e)),h=d(b.end);b.run=function(a){f[e]=c(g,h,a)}}}}),a.Tween.propHooks.borderColor={set:function(b){var f=b.elem.style,g=[],h=e.slice(2,6);a.each(h,function(c,e){g[e]=d(a(b.elem).css(e))});var i=d(b.end);b.run=function(b){a.each(h,function(a,d){f[d]=c(g[d],i,b)})}}}})(jQuery);
你还需要设置一个初始颜色值来设置动画(如果你还没有设置的话),据我所知(可能是错误的),你应该为你的颜色使用十六进制或rbg值来正确设置动画,而不是显式的颜色名称。
如果您不反对CSS3:http://jsfiddle.net/MkgDC/1/
img {
opacity: 1;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
p {
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
.opac:hover > img {
opacity: .6;
}
.opac:hover > p {
background: orange;
}
或者您可以使用jQueryUI
$('div.opac').hover(function(){
jQuery('img', this).animate({opacity: '0.6'}, 500);
jQuery('p', this).animate({backgroundColor: "#aa0000"}, 500 );
});
Fiddle
背景颜色无法设置动画。查看此链接http://api.jquery.com/animate/
相关文章:
- 剑道网格jQuery动画()问题
- 在EaselJS中设置精灵表动画时出现问题
- 关于使用Animate.css向和项添加和删除动画类的问题
- Chart.js 2.1.2条形图动画问题
- 动画、计时和运行循环等问题
- 如何在 jquery 中克服此问题以获得动画悬停效果
- jQuery 动画处理最大宽度溢出问题
- HTML5 画布动画问题
- 旋转木马动画事件问题
- 使用JSTween的动画气泡问题
- SVG模式动画和背景淡入问题
- 循环播放Raphael动画,没有fps问题
- Three.js-渲染问题-动画正在动摇
- Chrome动画CSS3三维立方体与悬停状态问题
- CSS3 动画和 JavaScript 类切换后的动画出现问题
- 轮播猫头鹰 2:字幕动画时遇到问题
- jQuery将问题动画化-动态选择方向
- jQuery幻灯片和停止问题:动画元素随着鼠标的快速移动而冻结
- jQuery,CSS问题-动画
- CSS Animation -play-state问题:动画恢复时跳转回初始帧