带有效果的 Jquery 翻转

Question

我用 jquery 创建了这个翻转，但没有得到动画背景鼠标悬停：

<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 个不同背景之间的过渡，但没有得到

问候！ :)

Answer 1

这是我认为您要求http://jsfiddle.net/d6pQx/32/ 的演示。让我知道这是否有效。