CODEWITHSUNDEEP
javascriptjquerycss
Nelssen
Nelssen

Reputation: 1147

How to fade out and fade in the divs sequentially

I want to fade out all elements sequentially, and then fade in all elements with new data.

Whats I've made only accomplish 50% of my goal as only the fadeIn happens sequentially, the fade out happens at the same time to all divs.

I would like to know what can I be doing wrong so that fadeout the elements happens sequentially.

Any thoughs how to solve this?

Css:

.class4 {
    width: 24%;
    height: 100px;
    float:left;
    box-shadow: 0px 2px 3px 0px rgba(174,174,174,0.50);
    background-image: url('http://assets.servedby-buysellads.com/p/manage/asset/id/25126');
    background-position: 50% 6%;
    background-size: 90%;
    background-repeat: no-repeat;


}
.class3 {
    width: 24%;
    height: 100px;
    float:left;
    box-shadow: 0px 2px 3px 0px rgba(174,174,174,0.50);
    background-image: url('http://assets.servedby-buysellads.com/p/manage/asset/id/25126');
    background-position: 50% 6%;
    background-size: 90%;
    background-repeat: no-repeat;

}
.class2 {
    width: 24%;
    height: 100px;
    float:left;
    box-shadow: 0px 2px 3px 0px rgba(174,174,174,0.50);
    background-image: url('http://assets.servedby-buysellads.com/p/manage/asset/id/25126');
    background-position: 50% 6%;
    background-size: 90%;
    background-repeat: no-repeat;

}
.class1 {
    width: 24%;
    height: 100px;
    float:left;
    box-shadow: 0px 2px 3px 0px rgba(174,174,174,0.50);
    background-image: url('http://assets.servedby-buysellads.com/p/manage/asset/id/25126');
    background-position: 50% 6%;
    background-size: 90%;
    background-repeat: no-repeat;
    border-bottom: 1px solid lightgray;
    border-left: 1px solid lightgray;
    border-right: 1px solid lightgray;
}

Jquery:

$(document).ready(function() { 
    $('#btn').on('click', function(){
 var loadTime = 500;
            $('.class1, .class2, .class3, .class4').each(function (fadeInDiv) {
                //$(this).delay(fadeInDiv * 500).fadeIn(1000);
                $(this).fadeOut(loadTime, function () {
                    $(this).css('background-image', 'url("https://assets.servedby-buysellads.com/p/manage/asset/id/15119")');
                    $(this).fadeIn(loadTime);
                    loadTime += 500;
                });
            });
        });
});

Html:

<input id = "btn" type="button" ><br><br>
<div class="class1"></div>
<div class="class2"></div>
<div class="class3"></div>
<div class="class4"></div>

JSFiddle: http://jsfiddle.net/xudaR/61/

Upvotes: 2

Views: 236

Answers (1)

user1012181
user1012181

Reputation: 8726

$(document).ready(function() {
  $('#btn').on('click', function() {
    var loadTime = 500;
    $('.class1, .class2, .class3, .class4').each(function(fadeInDiv) {

      $(this).fadeOut(loadTime, function() {
        $(this).css('background-image', 'url("https://assets.servedby-buysellads.com/p/manage/asset/id/15119")');

      }).data('delay', fadeInDiv * 300);

      $(this).fadeIn(loadTime);
      loadTime += 500;
    });

  });

});
.class4 {
  width: 24%;
  height: 100px;
  float: left;
  box-shadow: 0px 2px 3px 0px rgba(174, 174, 174, 0.50);
  background-image: url('http://assets.servedby-buysellads.com/p/manage/asset/id/25126');
  background-position: 50% 6%;
  background-size: 90%;
  background-repeat: no-repeat;
}

.class3 {
  width: 24%;
  height: 100px;
  float: left;
  box-shadow: 0px 2px 3px 0px rgba(174, 174, 174, 0.50);
  background-image: url('http://assets.servedby-buysellads.com/p/manage/asset/id/25126');
  background-position: 50% 6%;
  background-size: 90%;
  background-repeat: no-repeat;
}

.class2 {
  width: 24%;
  height: 100px;
  float: left;
  box-shadow: 0px 2px 3px 0px rgba(174, 174, 174, 0.50);
  background-image: url('http://assets.servedby-buysellads.com/p/manage/asset/id/25126');
  background-position: 50% 6%;
  background-size: 90%;
  background-repeat: no-repeat;
}

.class1 {
  width: 24%;
  height: 100px;
  float: left;
  box-shadow: 0px 2px 3px 0px rgba(174, 174, 174, 0.50);
  background-image: url('http://assets.servedby-buysellads.com/p/manage/asset/id/25126');
  background-position: 50% 6%;
  background-size: 90%;
  background-repeat: no-repeat;
  border-bottom: 1px solid lightgray;
  border-left: 1px solid lightgray;
  border-right: 1px solid lightgray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<input id="btn" type="button">
<br>
<br>
<div class="class1"></div>
<div class="class2"></div>
<div class="class3"></div>
<div class="class4"></div>

Let me know if this is what you want: code:

http://jsfiddle.net/xudaR/66/

Upvotes: 3

Related Questions