CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Brian Bishop
Brian Bishop

Reputation: 33

jQuery fade animation not doing what I want

I am trying to make the background image fade in and out with a dissolve effect. 

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

here is the 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>

Problem: Everything in the div, including the text and buttons fade in and out.

Question: I just want to have the background image change.

Upvotes: 0

Views: 82

Answers (1)

elzi
elzi

Reputation: 5672

It's because you're fading the entire element - it's working exactly how it's intended.

Nest the element containing only the background-image as a child element. Something like:

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

then run .fadeOut on the .bg-image element

Upvotes: 1

Related Questions