帮助使用 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

尝试使用 http://api.jquery.com/animate

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

Answer 2

您可以设置背景位置属性的动画，这将为您提供两个图像之间的平滑过渡：

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