带效果的Jquery Rollover

时间:2012-08-02 22:00:10

标签: javascript jquery jquery-ui mouseover

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

问候!!! :)

1 个答案:

答案 0 :(得分:1)

以下是我认为您要求http://jsfiddle.net/d6pQx/32/的演示。如果有效,请告诉我。