jQuery fadeOut().queue()配合使用的BUG

ele.fadeOut().queue();后会影响后续对ele的fadeIn()操作。
代码如下:

<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
    .container{
        width: 90%;
        height: auto;
    }
    #fadeDiv{
        width: 20vw;
        height: 20vh;
        background: cadetblue;
    }
    .button{
        width: 5vw;
        height: 5vw;
        border-radius: 50%;
        background: deepskyblue;
    }
</style>
<script src="../jquery-3.1.1.min.js"></script>
</head>
<body>
<div class="container">
    <div id="button0" class="button">button0</div>
    <div id="button1" class="button">button1</div>
    <div id="fadeDiv"></div>
</div>
<script>
(function () {
    $("#button0").click(function () {
        $("#fadeDiv").fadeOut(1000).queue(function () {
            console.log("1");
        });
    })
    $("#button1").click(function () {
        $("#fadeDiv").fadeIn();
    })
})()
</script>
</body>

目前在用setTimeOut()代替queue(),可行。
不过想问下queue()这样用出现的后果是什么原因呢,辛苦各位大佬点解~~谢谢

阅读 1.8k
2 个回答

参见:http://jquery.cuishifeng.cn/q...
文档直接规定调用queue()之后必须在里面调用dequeue() ,后面的动画队列才能够正常执行。估计源码里面设置了flag,需要通过dequeue()恢复flag值

$("#fadeDiv").fadeOut(1000).queue(function () {
    $(this).dequeue();
});
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题