How to fade out and fade in the divs sequentially


Tags: javascript,jquery,css

Problem :

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/



Solution :

$(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/


    CSS Howto..

    CSS: how to set width to children's width?

    How to give space between each tab in the navigation using Jquery and CSS

    How to hide currently selected li item from being an option when user clicks dropdown again?

    How to mark up a tiled layout with CSS?

    How do I get CSS mediaqueries to work with jQuery $(window).innerWidth()?

    How make divs next to each other?

    How to set inline css width using model values in c#, mvc

    How are CSS elements combined

    How to allow my CSS slide out element to push its neighboring content?

    How to make top/bottom borders appear ontop of left/right borders crossbrowser css

    How to apply animation on the list items such that during an instance of time only one list item is visible?

    How to use javascript/css to navigate through a pure css carousel/slideshow?

    How to organize CSS - table columns

    background image not showing on nested

    How to put a footer in the bottom (but not fixed or stick!) with css [duplicate]

    How to write page specific CSS in backbone js

    How to print text between css selectors in golang using html package?

    CSS - How to remove whitespace between anchored images

    How to fade out text on top of semi-transparent div using CSS?

    How to Display a DIV with 'fixed' and 'inline-block' Added to its CSS Properties

    How to leave out the last column when calculating the width

    How can I avoid CSS delay in Rails 3.2

    How to apply CSS class on current element using jQuery

    How to get a border around this polygon?

    How to add a mobile optimised external CSS to a Shopify site

    How to move a span after an img?

    How is this font face in CSS3 embedded into a css file?

    how to display php search engine execution time and number of results before the results

    How to make div expand only from bottom down

    How to access CSS on img tag