jquery - 使用 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

您可以为背景位置属性设置动画，这将使您在 2 个图像之间实现平滑过渡：

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

如果您的问题是关于在图像在 2 之间切换时淡化图像的不透明度，那么您无法使用单个元素来做到这一点。您需要将背景图像添加到嵌套元素，然后将它们淡入淡出：

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