帮助使用 Jquery 将淡入淡出应用到背景位置更改

发布于 2024-09-12 19:47:21 字数 471 浏览 2 评论 0原文

我对 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");  
});
});

非常感谢您的帮助！

原文

I'm very new to Jquery but have finally worked out how to change the background-image (a sprite) of my #contentContainer when hovering over a separate 'trigger' image. However, for the life of me I cannot work out how to apply a fade effect to the transition. Basically, instead of the current abrupt background image transition I would like it to fade in smoothly on mouseover and mouseout.

Here is my (non fading but working) script:

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

Very many thanks for any help!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

过去的过去 2024-09-19 19:47:21

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

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

Try using http://api.jquery.com/animate

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

回复收藏 0 原文

慕巷 2024-09-19 19:47:21

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

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

You can animate the background position property, which will give you a smooth transition between the 2 images:

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

If your question is about fading the opacity of the images as they switch between the 2, you can't do it with a single element. You'll need to add your background image to nested elements and then fade them in and out:

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

On hover, fade them in and out as required:

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

回复收藏 0 原文

~没有更多了~