Помогите применить затухание к изменению фона в Jquery

Question

Я очень плохо знаком с Jquery, но наконец-то понял, как изменить фоновое изображение (спрайт) моего #contentContainer при наведении курсора на отдельное изображение «триггера». Однако я не могу понять, как применить эффект плавного перехода к переходу. По сути, вместо текущего резкого перехода к фоновому изображению я бы хотел, чтобы он плавно переходил при наведении и наведении мыши.

Вот мой (не исчезающий, но работающий) скрипт:

var $j = jQuery.noConflict();
$j(document).ready(function(){
$j("#swapTrigger").hover(
function() {
$j("#contentContainer").css("background-position", "0px 1401px");    
},
function() {
$j("#contentContainer").css("background-position", "0px 0px");  
});
});

Большое спасибо за любую помощь!

Answer 1

Вы можете анимировать свойство положения фона, которое обеспечит плавный переход между двумя изображениями:

$j("#swapTrigger").css({backgroundPosition: "0 0"}); 
$j("#swapTrigger").hover(
    function() {
        $j("#contentContainer").animate({backgroundPosition: "0 1401px"});    
    },
    function() {
        $j("#contentContainer").animate({backgroundPosition: "0 0"});  
    }
);

Если ваш вопрос касается затухания непрозрачности изображений, когда они переключаются между двумя, вы не можете сделать это с одним элементом. Вам нужно добавить фоновое изображение к вложенным элементам, а затем постепенно увеличивать и уменьшать их:

<div id="contentContainer">
    Some content
    <div class="bg1"></div>
    <div class="bg2"></div>
</div>

При наведении, постепенно увеличивайте и уменьшайте их, как требуется:

var bg1 = $('.bg1');
var bg2 = $('.bg2');
$j("#swapTrigger").hover(
    function() {
        if(bg1.is(':hidden')){
           bg1.stop().fadeIn();
           bg2.stop().fadeOut();
        } else {
           bg2.stop().fadeIn();
           bg1.stop().fadeOut();
        }   
    }
);

Answer 2

Попробуйте использовать http://api.jquery.com/animate

 $j("#contentContainer").animate({"background-position": "0px 1401px"}, "slow");