animate backgroundPosition

Question

任何人都知道爲什麼下面不行。如果我只是直接設置CSS而不設置動​​畫，它就可以工作。 //div.css({backgroundPosition: "bottom left"});

$("#menu li").bind("mouseover", function(){ 
     var div=$(this).find('div'); 
     div.css({backgroundPosition: "bottom left"}); 
     div.stop().animate({backgroundPosition: '25px 0px'}, {duration:500}); 
    }) 
    .mouseout(function(){ 
     var div=$(this).find('div'); 
     div.stop().animate({backgroundPosition: "0px 0px"}, {duration:500}); 

    }); 

Answer 1

你必須設置backgroundPosition在IE瀏覽器的初始值，否則這不會工作，因爲它不知道如何製作動畫。

另外我想改變鼠標懸停和鼠標移開，以具有相同的風格沒有使用綁定onone和使用的其他類似鼠標懸停在我的例子

這樣的：

$("#menu li > div").css({ 
    backgroundPosition: "0px 0px" 
}) 

$("#menu li").mouseover(function() { 
    var div = $(this).find('div'); 
    div.stop().animate({ 
     backgroundPosition: '25px 0px' 
    }, 500); 
}).mouseout(function() { 
    var div = $(this).find('div'); 
    div.stop().animate({ 
     backgroundPosition: "0px 0px" 
    }, 500); 
}); 

Answer 2

試試這個

$("#menu li").bind("mouseover", function(){ 
     var div=$(this).find('div'); 
     div.stop().animate({backgroundPosition: '25px 0px'}, 500); 
    }) 
    .mouseout(function(){ 
     var div=$(this).find('div'); 
     div.stop().animate({backgroundPosition: "0px 0px"}, 500); 

    });