没有回调的 jQuery 队列命令

Question

我希望 DIV 淡出，更新其内容，然后尽可能整齐地淡入。

当前方式 (http://jsfiddle.net/19czxx9r/2/)

$(".my_div").off().on('click', function(){
    $(".my_div").fadeOut(function(){
       $(".my_div").text("i was clicked");
        $(".my_div").fadeIn();    
    });
});

理想方式 (http://jsfiddle.net/19czxx9r/1/)

$(".my_div").off().on('click', function(){
    $(".my_div").fadeOut();
    $(".my_div").text("i was clicked");
    $(".my_div").fadeIn();
});

我想避免使用当前可行的方法，因为我最终需要为我的项目嵌套数十个函数。

有没有办法以理想的方式有效地对命令进行排队，以便在每个命令完成后运行？

谢谢

Answer 1

您总是可以编写自己的 queue 助手：

$.fn.queueText = function(text){
    var jq = this;
    return jq.queue(function(){
        jq.text(text);
        jq.dequeue();
    });
};

var myDiv = $(".my_div");
myDiv.fadeOut().queueText('I was clicked').fadeIn();

$.fn.queueText = function (text) {
    var jq = this;
    return jq.queue(function () {
        jq.text(text);
        jq.dequeue();
    });
};

var myDiv = $(".my_div");

myDiv.off().on('click', function () {
    myDiv.fadeOut().queueText('I was clicked').fadeIn();
});

.my_div {
    font-size:30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="my_div">click me</div>