jQuery 淡入淡出动画没有按照我的意愿进行

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

这是因为您正在淡化整个元素 - 它完全按照预期工作。

嵌套仅包含背景图像的元素作为子元素。类似于：

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

然后在 .bg-image 元素上运行 .fadeOut

jQuery 淡入淡出动画没有按照我的意愿进行

jQuery fade animation not doing what I want

html

javascript

css

jquery