Question

我试图让背景图像以溶解效果淡入淡出。

 $(window).load(function() {
        var i =0;
        var images = ['http://ascendspa.com/wellness/wp-content/uploads/2014/07/Vayo-Massage.jpg?w=261&h=196&crop=1','http://massagehaveneagan.webstarts.com/uploads/massage.jpg'];
        var image = $('#bg');
                    //Initial Background image setup
        image.css('background-image', 'url(http://massagehaveneagan.webstarts.com/uploads/massage.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);
     });

这是html

 <div id="bg">
        <div class="container">
            <div class="row">
                <div class="col-sm-7 col-lg-7 main">
                    <h1>Get A Massage Today!</h1>
                </div>
                <div class="col-sm-5 col-lg-5 main1 order">
                    <h2>Make an Appointment Today!</h2>
                    <button class="btn btn-primary btn-large dropdown-toggle" type="button" data-toggle="dropdown">Haircut <span class="caret">&nbsp;</span></button>
                    <button class="btn btn-primary btn-large dropdown-toggle" type="button" data-toggle="dropdown">Massage <span class="caret">&nbsp;</span></button>
                    <button class="btn btn-primary btn-large dropdown-toggle" type="button" data-toggle="dropdown">Healing <span class="caret">&nbsp;</span></button>
                    <p class=hometext>Get the pampering you deserve. We offer haircuts, massages, and more.</p>
                </div>
            </div>
        </div>
    </div>

问题：div中的所有内容，包括文本和按钮都会淡入淡出。

问题：我只想更改背景图片。

Answer 1

这是因为你褪去整个元素 - 它正是按照它的预期工作。

将仅包含background-image的元素嵌套为子元素。类似的东西：

#bg {
  position: relative;
}
#bg .bg-image {
  position: absolute;
  top:0;left:0;
  width:100%;height:100%;
}

然后在.fadeOut元素

上运行.bg-image

jQuery淡化动画没有做我想要的

1 个答案: