Jquery Rollover with Effects

Question

I create this rollover with jquery , but no get works animate background mouseover :

<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>

When i go mouseover i try get animate background as transition between 2 different backgrounds , but no get

Regards !!! :)

Answer 1

Here is a demo of what I think you are asking for http://jsfiddle.net/d6pQx/32/ . Let me know if this works.