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 ?

This question is off-topic on Stackoverflow. Stackoverflow is not for question like "Please give me the code for X". Start coding, do some research, learn jQuery. Then when you get stuck somewhere in the implementing process we will be happy to assist you — RononDex, Feb 07 '14 at 10:22

score 2 · Accepted Answer · answered Feb 07 '14 at 10:32

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);

});

score 1 · Answer 2 · answered Feb 07 '14 at 10:28

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>

score 0 · Answer 3 · answered Feb 07 '14 at 10:26

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.

score 0 · Answer 4 · answered Feb 07 '14 at 10:27

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

score -1 · Answer 5 · answered Feb 07 '14 at 10:27

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

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

5 Answers5

JQUERY

HTML