显示div片刻然后切换到jquery中的另一个div

Question

我尝试使用jQuery 1.9.1制作动画，我想在短时间内显示div，然后在按钮点击时使用defualt div切换它。到目前为止，我已尝试使用show()＆amp; hide()方法。但没有任何工作。这是我的代码，

<script>
    $(document).ready(function (){
        $('#btnChange').click(function () {
            $('#red').hide();
            $('#blue').show().delay(1500).hide();
            $('#red').show();
        });
    });
</script>

JSFiddle Demo Here

如何显示div片刻，然后在按钮点击时使用默认div #red切换？ Neec这个帮助很严重。谢谢！

Answer 1

如果您为.hide( [duration ] [, complete ] )方法设置了持续时间，则会将其放在fx queue中，因此延迟会有效：

  

你应该stop()任何以前的动画来更好地处理多个动画   点击btw

$(document).ready(function (){
    $('#btnChange').click(function () {
        $('#red').hide();
        $('#blue')/*.stop()*/.show().delay(1500).hide(0);
        $('#red').show();
    });
});

-jsFiddle-

使用.stop()：

-jsFiddle-

Answer 2

使用简单的setTimeout

$(document).ready(function (){
  $('#btnChange').click(function () {
    $('#red').hide();
    $('#blue').show();
    setTimeout(function() {
      $('#blue').hide();
      $('#red').show();
    }, 1500);
  });
});

#red{
    position: absolute;
	width: 178px;
	height: 124px;
    background-color: red;
	overflow: hidden;
}
#blue{
    position: absolute;
	width: 178px;
	height: 124px;
    background-color: blue;
	overflow: hidden;
    display: none;
}
#btnChange{
    position: absolute;
    top: 150px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="red"></div>
<div id="blue"></div>
<button id="btnChange">Change!</button>

Answer 3

    120, "Shutdown om 5 minutter!", wshYesNoDialog + vbSystemModal + wshQuestionMark)

http://jsfiddle.net/f87zp3rg/3/

Answer 4

您再次显示#red以快速...使用setTimeout

  

window.setTimeout（代码，[延迟]）;

$(document).ready(function (){
    $('#btnChange').click(function () {
        $('#red').hide();
        $('#blue').show();
        window.setTimeout(function() { 
          $('#red').show(); 
          $('#blue').hide()
        },1500);
    });
});

<强> JSFidde： http://jsfiddle.net/f87zp3rg/4/

Answer 5

试试这段代码

$(document).ready(function (){
$('#btnChange').click(function () {

    $('#red').fadeOut(500);
    $('#blue').fadeIn(500, function() {
        $('#blue').delay(3000).hide();
        $('#red').delay(5000).show();
    });
  });
});