Question

我的页面中有两个div，名为div1，div2和一个按钮。最初div2将被隐藏。当我点击按钮应该发生三件事

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

如何使用jquery实现上述功能？

Answer 1

试试这个

<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

好的，看看这个。

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

您的代码应该是这样的：

CSS：

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

jQuery的：

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

这基本上是做什么的：

您点击按钮
第一个div消失，图像显示
2秒（2000毫秒）后，图像消失，出现第二个div。

Answer 4

如果我已正确理解您的问题，此代码将为您提供帮助：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

用一些动画关闭div1

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

获取更多帮助fadeOut

显示特定时间的加载图片

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

使用一些动画显示div2

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

获取更多帮助fadeIn

如何关闭div，显示图像加载并在jquery中打开另一个div？

5 个答案:

JQUERY

HTML