Crossfade使用jQuery的背景图片 [英] Crossfade Background images using jQuery

问题描述

我想通过悬停元素来交叉淡入淡出/过渡背景图片。是可能吗？
我有一个具有背景图像的 DIV 元素，但是当你悬停它时，背景图像随着过渡/交叉淡化效果而变化。在我的样式表上，我已经为悬停状态分配了一个类。

这是正常或非悬停状态 DIV 。

  #crossfade DIV {
 width：100px; 
 height：100px; 
 background-image：url（'img / bg.jpg'）; 
} 
  

下面是 DIV 。

  #crossfade DIV.hovered {
 background-image：url（'img / bg -1.jpg'）; 
} 
  

然后我的jquery脚本如下：

  $（function（）{
 $（'＃crossfade'）。find（'DIV'）。hover（function（）{
 $ （this）.addClass（'hovered'）; 
}，function（）{
 $（this）.removeClass（'hovered'）; 
}）; 
} ; 
  

我的脚本只是简单地切换背景图片。现在我想要的是给它一个过渡效果或更像fadeIn / fadeOut效果。就像前一个背景图像渐弱，下一个背景图像也渐渐消失。

任何想法如何做到这一点？是可能吗？

感谢：）

解决方案

有些时候排除这个问题，因为它也感兴趣我。

第一：我不相信你可以交叉淡化背景图片使用 addClass 和 removeClass ，因为您不能随时在一个元素上淡出一个元素。 （如果我错了这一点，有人在学校我）。

只是为了让你知道我知道你想要什么，我成功地得到了以下工作：

  $（div-bkgrnd-1）。hover（function（）{
 $ ）.fadeOut（slow，function（）{
 $（this）.addClass（'div-bkgrnd-2' .removeClass（'div-bkgrnd-1'）; 
}）; 
}）; 
}）; 
  

但是，不是解决了您的问题， 交叉淡化 2张图片。

您会看到 fadeOut 首先运行，添加，然后运行 fadeIn ，并删除第一个类。您不能同时运行 fadeOut 和 fadeIn （这将创建您要查找的交叉淡入淡出），因为如果您删除第一个类之前

这是一个我相信会为你工作的解决方案。

HTML：

 < div id =div1> ; <！ -  with CSS background-image applied  - > 
< img id =img/> 
< / div> 
   
 
 
 
  jQuery ：
  $（＃div1）hover（function（）{
 $（＃img）。fadeToggle（slow）; 
} ）; 
  
 注意：请务必将div定位到悬停函数
 
 
 
（此解决方案假定您希望图片在悬停时交叉淡入淡出，然后在悬停时交叉淡入淡出到原始图片。 
 
 
 
如果您指定背景图片，因为您需要其他内容坐在前面，这很容易解决使用z-index和一个包含div（加上jQuery上面）。
 
 
 
  HTML： 
 < div id =container> 
< div id =div1> 
< img id =img/> 
< / div> 
< div id =div2> 
此处显示在div1顶部的一些内容。
< / div> 
< / div> 
  
  CSS ：
 ＃div1 {
 z-index：1; 
 position：absolute; 
 background-image：image1; 
} 
 b $ b＃div2 {
 z-index：2; 
 position：relative; 
} 
  
 
I want to crossfade/transition background images through hovering the element. Is is possible?
I have a DIV element that has a background image but when you hover it, the background image changes with a transition/crossfade effect. On my Stylesheet i have assigned a class for hover state.

Here is the normal or non-hover state of DIV.
#crossfade DIV{
    width: 100px;
    height: 100px;
    background-image: url('img/bg.jpg');
}
Below is the hover state class of DIV.
#crossfade DIV.hovered{
    background-image: url('img/bg-1.jpg');
}
Then my jquery script below:
$(function(){
    $('#crossfade').find('DIV').hover(function(){
        $(this).addClass('hovered');
    }, function(){
        $(this).removeClass('hovered');
    });
});
My script just simple switch the background image. Now what i want is to give it a transition effect or more like fadeIn/fadeOut effect. Like as the previous background image is fading out, the next background image is also fading In.

Any idea how to do this? Is it possible?

Thanks :)
解决方案
I spent quite some time troubleshooting this as it interested me as well. Learnt a lot so thought I'd share it with you.

First: I don't believe you can cross-fade background images using addClass and removeClass because you can't logistically fade an element in and out at the same time. (If I'm wrong about this please someone school me).

Just so that you know that I know what you're wanting, I successfully got the following to work:
$(".div-bkgrnd-1").hover(function() {
    $(this).fadeOut("slow",function() {
        $(this).addClass('div-bkgrnd-2').fadeIn("slow",function() {
            $(this).removeClass('div-bkgrnd-1');
        });
    });
});
However, this DOESN'T resolve your issue, which is creating a cross-fade of 2 images.

You will see that the fadeOut runs first, then the new class is added, then the fadeIn is run, and the first class is removed. You can't run the fadeOut and fadeIn (which would create the cross-fade you're looking for) at the same time because if you remove the first class before the fadeOut is finished, it interrupts the animation.

Here is a solution that I believe will work for you.

HTML:
<div id="div1"> <!-- with CSS background-image applied -->
    <img id="img" />
</div>
jQuery:
$("#div1").hover(function() {
    $("#img").fadeToggle("slow");
});
Note: Be sure to target the div for your hover function; targeting the image results in some bizarre behaviour.

(This solution assumes you wanted the image to crossfade when you hover and then crossfade back to the original when you un-hover. Changing the function to fadeOut will work as a once-off if that's what you want).

If you were specifying background images because you need other content to sit in front, this is easily solved using z-index and a containing div (plus the jQuery above).

HTML:
<div id="container">
    <div id="div1">
        <img id="img" />
    </div>
    <div id="div2>
        Some content here to appear over the top of "div1".
    </div>
</div>
CSS:
#div1 {
    z-index: 1;
    position: absolute;
    background-image: image1;
}

#div2 {
    z-index: 2;
    position: relative;
}


                        
这篇关于Crossfade使用jQuery的背景图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！