jQuery的翻轉與影響

Question

我創建這個過渡與jQuery，但沒有get作品動畫背景鼠標懸停：

<script> 
$(function() { 

var number_menus=5; 

for(i=1;i<=number_menus;i++) 
{ 


if(i%2==0) 
{ 
var p1=1; 

$(".web_header_mb_"+i).show(1000).css("background","url(imagenes/botones/head_"+p1+"_up.png)"); 

$(".web_header_mb_"+i).mouseover(function() { 

$(this).css("background-image","url(imagenes/botones/head_"+p1+"_down.png)"); 



$(this).animate(
{backgroundPosition:"(0 -250px)"}, 
{opacity:3.0}, 
{height: 'toggle'}, 
{duration:2000} 
); 











}); 


$(".web_header_mb_"+i).mouseout(function() { 

$(this).css("background-image","url(imagenes/botones/head_"+p1+"_up.png)"); 

}); 




} 
else 
{ 
var p2=2; 

$(".web_header_mb_"+i).show(1000).css("background","url(imagenes/botones/head_"+p2+"_up.png)"); 




$(".web_header_mb_"+i).mouseover(function() { 

$(this).css("background-image","url(imagenes/botones/head_"+p2+"_down.png)"); 

}); 


$(".web_header_mb_"+i).mouseout(function() { 

$(this).css("background-image","url(imagenes/botones/head_"+p2+"_up.png)"); 

}); 






} 







} 


}); 

</script> 




<div id="web_header_menu_boton" class="web_header_mb_1" style="display:none;">1</div> 
<div id="web_header_menu_boton" class="web_header_mb_2" style="display:none;">2</div> 
<div id="web_header_menu_boton" class="web_header_mb_3" style="display:none;">3</div> 
<div id="web_header_menu_boton" class="web_header_mb_4" style="display:none;">4</div> 
<div id="web_header_menu_boton" class="web_header_mb_5" style="display:none;">5</div> 

，當我去的鼠標懸停我嘗試讓動畫背景2和不同背景之間的過渡，但沒有得到

Regards !!! :)

Answer 1

這是我想你要求的一個演示http://jsfiddle.net/d6pQx/32/。讓我知道這個是否奏效。