jQuery

Question

ile arka plan konumunu değiştirin

Bir CSS sınıfının arka plan konumunu değiştirmek için bir li-elementi kaydırıyorum.

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); 
} 

Bunun nasıl herhangi bir öneriniz? submenu div bir li süpürdü edilir carousel div üzerinde backgroundPosition için

Answer 1

gitmek:

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

Setleri yeni değer. Uçları bittiğinde backgroundPosition öğesini kaldırır ve backgroundPosition değerini eski değerine sıfırlar. İşte

$('#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

Sizler şeyler karmaşık hale. Bunu CSS'den basit bir şekilde yapabilirsiniz.

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

Answer 5

isyanın cevabı yukarıdaki aslında, çünkü CSS, işe yaramaz, 'background-position' doğru sürümüne yüzden 'background-position-x' ve 'background-pozisyonunda-y' için steno aslında onun kod şöyle olacaktır:

$(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); 
    }); 
}); 

o ağırlaştırıcı fark etmesi gerekir karşı başımı beceriyor yaklaşık 4 saat sürdü.