使用jQuery渐变背景图片而不出现白色的方法

Question

使用jQuery渐变背景图片而不出现白色的方法

3

我有一个脚本，可以在单个 div 中切换背景图片，我希望它能够淡入淡出；但是，我不想在其中间出现任何白色。我已经进行了几次搜索，但是它们都使用列表项而不是单个 div。我希望它只从一个背景图片过渡到下一个。这是我的当前脚本：

<script>
$(window).load(function() {           
      var i =0; 
      var images = ['http://www.example.com/images/homepage/slider-2.jpg','http://www.example.com/images/homepage/slider-3.jpg','http://www.example.com/images/homepage/slider-1.jpg'];
      var image = $('#mainimage');
                    //Initial Background image setup
      image.css('background-image', 'url(http://www.example.com/images/homepage/slider-1.jpg)');
                    //Change image at regular intervals
      setInterval(function(){   
       image.fadeOut(1000, function () {
       image.css('background-image', 'url(' + images [i++] +')');
       image.fadeIn(1000);
       });
       if(i == images.length)
        i = 0;
      }, 5000);            
     });
</script>

这是我的当前CSS：

    #mainimage {
      background: url('http://www.example.com/images/homepage/slider-1.jpg') no-repeat center center fixed; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      height:98.5%;
      min-height: 400px;
      border-bottom:15px solid #77951c;
}

HTML:

    <div id="mainimage">
       <div id="searchwrapper"> 
        <div id="hometitlewrapper"> 
        <h1>Cabins & Cottages <span>for Sale</span></h1> 
       </div> 
       <div id="searchboxwrapper"> 
          <input id="state" class="autocomplete" type="search" placeholder="Search by Location" results /> 
      </div> 
  </div>

这里有一个fiddle

该链接为fiddle页面。

- Chris Allington

3

听起来你想要实现图像的淡入淡出效果。我从未尝试过只使用一个元素来完成这个效果，通常我会使用两个div或者图片，通过将其中一个设置为透明度来实现一个淡出另一个淡入的效果。 - Turnerj

@Turnerj，那正是我想要做的。 - Chris Allington

展示你的HTML。 - Cerlin

1

<div id="mainimage"> <div id="searchwrapper"> <div id="hometitlewrapper"> <h1>乡村小屋和小屋<span>出售</span></h1> </div> <div id="searchboxwrapper"> <input id="state" class="autocomplete" type="search" placeholder="按地点搜索" results /> </div> </div> </div> - Chris Allington

2

嗨，Chris，应该将HTML和解释添加到原始帖子中，而不是评论中，以使帖子成为有用的参考资料。 - Muhammad Gouda

显示剩余5条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- darcher · Accepted Answer

最简便的方法是只改变一个元素，通过将过渡效果传递到CSS层来实现。使用类来调整背景图像。

更新类而不是在jquery/js中全部完成的另一个好处是，如果您想要在将来集成用户控件（例如开始，停止，前进/后退导航），则可以更轻松地进行集成。

演示

仅使用CSS预加载图片 fiddle

JS预加载图片和对象延迟 fiddle -- 感谢Terry

预加载图片和循环类有许多方法，这只是一个快速编写，请按照自己的逻辑去做

代码开始

CSS

我选择了cubic-bezier，基本上是倒置的ease-in-out以获得平滑的过渡效果，但您也可以使用ease，linear或任何其他过渡效果。

根据您的支持需求添加前缀到transition和background-size。请注意，IE8及以下版本不支持background-size:cover，请阅读此文章以获取可能的解决方法

/* preload images (css only) -- remove if you're using a js method*/
body:after{
    display:none;
    content:url(http://placehold.it/400x400/4fa/222)
            url(http://placehold.it/500x500/fa4/222)
            url(http://placehold.it/600x600/4af/222)
            url(http://placehold.it/700x700/af4/222)}

/* background defaults*/
#mainimage{
    background-position:center center;
    background-repeat:no-repeat;
    background-size:cover;
    width:100vw;
    height:100vh;
    transition:background-image 1s cubic-bezier(.44,.75,.38,.73)}

/* background image(s) */
.stage0{background-image:url(http://placehold.it/400x400/4fa/222)}
.stage1{background-image:url(http://placehold.it/500x500/fa4/222)}
.stage2{background-image:url(http://placehold.it/600x600/4af/222)}
.stage3{background-image:url(http://placehold.it/700x700/af4/222)}

jQuery

然后只需使用不同的背景图像更新类，并使用所需的时间间隔...这可以以任何你选择的方式完成，我在此处只是用一个简单的计数来更新类。

var counter = 0;
setInterval(function(){
    $("#mainimage").prop("class", "stage" + counter);
    if (counter === 3){
        counter = 0;
    } else {
        counter++;
    }
}, 2000);

HTML

将基本类添加到#mainimage元素中，我建议您使用类而不是ID来减轻任何特异性问题。

<div id="mainimage" class="stage0">
    <div id="searchwrapper"> 
        <div id="hometitlewrapper"> 
            <h1>Cabins &amp; Cottages <span>for Sale</span></h1> 
        </div> 
        <div id="searchboxwrapper"> 
            <input id="state" class="autocomplete" type="search" placeholder="Search by Location" results /> 
        </div>
    </div>
</div>

……还有，我很讨厌使用&代替"&"……