jQueryでバックグラウンドの位置を変更してください

Question

li要素をホバリングしながらCSSクラスの背景位置を変更したいと思います。

HTML：

<div id="carousel"> 
    <ul id="submenu"> 
     <li>Apple</li> 
     <li>Orange</li> 
    </ul> 
</div> 

CSS：

#carousel { 
    float: left; 
    width: 960px; 
    height: 360px; 
    background: url(../images/carousel.png); 
} 

これを行う方法上の任意の提案は？

Answer 1

ここに行く：

$(document).ready(function(){ 
    $('#submenu li').hover(function(){ 
     $('#carousel').css('background-position', '10px 10px'); 
    }, function(){ 
     $('#carousel').css('background-position', ''); 
    }); 
}); 

Answer 2

$('#submenu li').hover(function(){ 
    $('#carousel').css('backgroundPosition', newValue); 
}); 

Answer 3

submenu divの中のLiが推移したときcarousel divの上backgroundPositionの新しい値を設定します。ホバリングが終了したときにbackgroundPositionを削除し、backgroundPositionを古い値にリセットします。

$('#submenu li').hover(function() { 
    if ($('#carousel').data('oldbackgroundPosition')==undefined) { 
     $('#carousel').data('oldbackgroundPosition', $('#carousel').css('backgroundPosition')); 
    } 
    $('#carousel').css('backgroundPosition', [enternewvaluehere]); 
}, 
function() { 
    var reset = ''; 
    if ($('#carousel').data('oldbackgroundPosition') != undefined) { 
     reset = $('#carousel').data('oldbackgroundPosition'); 
     $('#carousel').removeData('oldbackgroundPosition'); 
    } 
    $('#carousel').css('backgroundPosition', reset); 
}); 

Answer 4

君たちは物事を複雑にしています。 CSSからこれを簡単に行うことができます。 CSSに、 '背景位は' 実際には 'のbackground-position-x' のための速記と 'のbackground-position-Y' であるため、上記の

#carousel li { background-position:0px 0px; } 
#carousel li:hover { background-position:100px 0px; } 

Answer 5

反乱の答えは、実際に彼の正しいバージョンので、動作しません。コードは次のようになります。

$(document).ready(function(){ 
    $('#submenu li').hover(function(){ 
     $('#carousel').css('background-position-x', newValueX); 
     $('#carousel').css('background-position-y', newValue); 
    }, function(){ 
     $('#carousel').css('background-position-x', oldValueX); 
     $('#carousel').css('background-position-y', oldValueY); 
    }); 
}); 

それが悪化実現に来ることに対して、それは私の頭を叩いて約4時間かかりました。