私は 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つの異なる背景間の遷移としてアニメーションの背景を取得しようとしますが、取得しません
よろしく!!! :)