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

【问题标题】：How to close a div,show image load and open another div in jquery?如何关闭一个 div，显示图像加载并在 jquery 中打开另一个 div？
【发布时间】：2014-02-07 18:32:14
【问题描述】：

我的页面中有两个名为 div1 和 div2 的 div 和一个按钮。最初 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 实现上述功能？

【问题讨论】：

这个问题在 Stackoverflow 上是题外话。 Stackoverflow 不适用于“请给我 X 的代码”之类的问题。开始编码，做一些研究，学习 jQuery。那么当您在实施过程中遇到困难时，我们将很乐意为您提供帮助

标签： jquery animation image-loading

【解决方案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);

});

【讨论】：

【解决方案2】：

好的，看看这个。

演示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>

【讨论】：

【解决方案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 出现。

【讨论】：

【解决方案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();
    });
});

【讨论】：

【解决方案5】：

用一些动画关闭 div1

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

更多帮助fadeOut

显示特定时间的加载图像

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

用一些动画显示 div2

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

更多帮助fadeIn

【讨论】：