How to close a div,show image load and open another div in jquery?

Question

I have two div in my page named div1 and div2 and a button.Initially div2 will be hidden.When i click on the button three things should happen

1.close the div1 with some animation
2.Show a loading image for a particular amt of time
3.Show the div2 with some animation

How can i implement the above using jquery ?

Answer 1

Try like this

<div>
<div id="div1"></div>
<div id="loading-image" style="display:none;"><img src="loader.gif"/></div>
<div id="div2" style="display:none;"></div>
</div>

$("#button").click(function(){

$("#div1").slideUp();
$("#loading-image").show();

setTimeout(function() {
$("#loading-image").hide();
           $("#div2").slideDown();

        }, 500);

});

Answer 2

Ok, check this out.

DEMO http://jsfiddle.net/D9Nw6/1/

JQUERY

$(document).ready(function () {
    $('input').on('click', function () {
        $('#loading').show();
        $('#one').slideUp(1000);
        $('#two').slideDown( "1000", function() {
            // Animation complete.
            $('#loading').hide();
        });        
    });
});

HTML

<input type="button" value="Click Me" />
<div id="one">Blue</div>
<div id="two">Red</div>
<div id="loading"></div>

Answer 3

Your code should be something like this:

CSS:

#div2,, #my-img {
    display:none;
}

jQuery:

$('#my-button').on('click', function () {
    $('#div1').fadeOut();
    $('#my-img').fadeIn();
    setTimeout(function(){ 
        $('#div2').fadeIn(); 
    }, 2000 );
}

What this basicly does is:

• You click on the button
• The first div dissappears and the image appears
• After 2 seconds (2000 miliseconds) the image disappears and the second div appears.

Answer 4

If I had understood your question correctly, this code will help you: http://jsfiddle.net/dehisok/c6XCx/

$('#div1').fadeOut(500, function() {        
    $('body').append('<img src="http://ppt4web.ru/assets/2c736062/img/loading.gif" class="loading" width="100" />');

    $('#div2').fadeIn(1000, function() {
        $('.loading').remove();
    });
});

Answer 5

close the div1 with some animation

$('#div1').fadeOut('slow');

for more help fadeOut

Show a loading image for a particular amt of time

$("#loadingDiv").show().delay(5000).fadeOut('slow');

Show the div2 with some animation

$('#div1').fadeIn('slow');

for more help fadeIn