jQuery меняет фоновое положение CSS и mouseover/mouseout
Мне составили меню единственного изображения (например, спрайты). Для отображения изображения при наведении курсора я просто спускаю фоновое изображение. Я хотел бы, чтобы этот эффект управлялся jQuery и анимировался.
Это - демонстрационный пункт меню.
<ul>
<li id="home"><a href="#"></a></li>
</ul>
Это - то, с чем я играю. Я очень плохо знаком с jQuery и имею проблемы при получении надлежащего селекторного движения.
$(document).ready(function(){
$('#home a');
// Set the 'normal' state background position
.css( {backgroundPosition: "0 0"} )
// On mouse over, move the background
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(0 -54px)"}, {duration:500})
})
// On mouse out, move the background back
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:500})
})
});
Вы могли указать на то, что я делаю неправильно? Я знаю, что селектор является, вероятно, неправильным, но мне нелегко выяснять, как управлять привязкой.
4 ответа
Если бы вы не анимировали переходы - и учитывая типы изображений, которые я сгруппировал как спрайты, я не знаю, зачем вам когда-нибудь это сделаете - тогда вам понадобится что-то вроде этого:
$(document).ready(function(){
$('#home a')
// On mouse over, move the background on hover
.mouseover(function() {
$(this).css('backgroundPosition', '0 -54px');
})
// On mouse out, move the background back
.mouseout(function() {
$(this).css('backgroundPosition', '0 0');
})
});
Теперь, если вы пытаетесь это анимировать, значит, у вас плохой синтаксис для CSS и для вызовов "animate" .
$(document).ready(function(){
$('#home a')
// On mouse over, move the background on hover
.mouseover(function(){
$(this).stop().animate({backgroundPosition: "0 -54px"}, 500);
})
// On mouse out, move the background back
.mouseout(function(){
$(this).stop().animate({backgroundPosition: "0 0"}, 500);
})
});
Опять же, я сомневаюсь, что jQuery сможет анимировать для вас «backgroundPosition», но я не использую «animate ()» очень часто, и jQuery всегда удается меня удивить.
редактировать: вот страница: http://snook.ca/archives/javascript/jquery-bg-image-animations/
Я полагаю, что ваш фон привязан к li?! Однако this установлен на a селектора, поэтому, если мое предположение верно, вам нужно изменить код на
$(document).ready(function(){
$('#home a')
// On mouse over, move the background on hover
.mouseover(function(){
$(this).parent().stop().animate({backgroundPosition:"(0 -54px)"}, {duration:500})
})
// On mouse out, move the background back
.mouseout(function(){
$(this).parent().stop().animate({backgroundPosition:"(0 0)"}, {duration:500})
})
});
{backgroundPosition:"(0 -54px)"
(Скобки здесь не нужны. В правиле CSS background-position скобок нет.)
В любом случае jQuery не знает, как анимировать составное значение вроде backgroundPosition. В IE вы получаете доступ к нему через backgroundPositionY, которое, как простое значение, jQuery может анимировать. Однако это нестандартно и не будет работать в других местах.
Вот плагин, который пытается это исправить.
$('#home a')
.mouseenter(function(){
$(this).parent().stop().animate({backgroundPosition:"(0 -54px)"},500)
})
.mouseleave(function(){
$(this).parent().stop().animate({backgroundPosition:"(0 0)"},500)
})
// По возможности используйте MouseEnter и MouseLeave, и вам не нужно вводить продолжительность с текущей версией jQuery. Надеюсь это поможет.