愚蠢的問題與jQuery

對不起，我的英文不好的動畫功能。愚蠢的問題與jQuery

動畫效果 jQuery的功能在第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：開發工具不提供任何錯誤...

來源

2013-07-04 CastenettoA

現在您發佈的jQuery代碼是有語法錯誤。這是實際的代碼嗎？可能這就是爲什麼代碼不工作 –

你缺少牆裙傷心的話）;在函數結束時。也許這將也有助於> http://stackoverflow.com/questions/190560/jquery-animate-backgroundcolor –

哦，我寫的不對的代碼。現在是對的。但原來的代碼是正確的，不再工作... – CastenettoA

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值爲您的顏色正確動畫，而不是顯式顏色名稱。

來源

2013-07-04 16:19:57 relic

也可能與[jQuery UI]（http://jqueryui.com/animate/） – Alvaro

哦，我不知道。非常感謝！！ :) – CastenettoA

如果你不反對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; 
}

來源

2013-07-04 16:22:33

是的，我知道...而且太棒了。但是我不能在開發中使用它 – CastenettoA

背景顏色不能動畫。看到此鏈接

來源

2013-07-04 16:24:34

或者你可以使用jQueryUI的

$('div.opac').hover(function(){ 
    jQuery('img', this).animate({opacity: '0.6'}, 500); 
    jQuery('p', this).animate({backgroundColor: "#aa0000"}, 500); 
    });

Fiddle

來源

2013-07-04 16:24:41

愚蠢的問題與jQuery

回答

相關問題