jquery - 如何在jquery中按顺序排列效果

Question

我有这段代码：

$("a#list-mode").click(function() {
  $("#list-fix-pos").removeClass('col-lg-3', 1250, "easeInOutQuart" );
  $(this).hide("fade", 1250, true);
  $("a#map-mode").show("fade", 1250, true);
});

我如何订购效果以便它们按顺序发生？此刻，所有效果都同时转换。

谢谢

Answer 1

jQuery.hide和.show函数允许您指定在完成时执行的函数。语法是

.hide( duration [, easing ] [, complete ] )

在你的情况下，那是

$("a#list-mode").click(function() {
    $("#list-fix-pos").hide(1250, 'easeInOutQuart', function() {
        $(this).hide(1250, 'fade', function() {
            $("a#map-mode").show(1250, 'fade');
        });
    });
    $("#list-fix-pos").removeClass('col-lg-3');
});

Answer 2

你有3个选项

• 使用完整的回调

• 当动画正在进行时使用元素返回的承诺

• 利用.delay()

第三种情况最简单，保持代码更干净

$(...).animate(duration1,...)...
$(...).delay(duration1).animate(duration2,...)...

只是承诺：

$(...).animate().promise().pipe(...)

或类似的东西

$.when($(...).animate(...).promise())
 .then(function (){ return $(...).animate(...).promise() })
 .then(function (){ return $(...).animate(...).promise() })
 ... 

如果你给函数命名，这看起来会很不错

function hideButton() { return $(...).animate().promise() }
function showMenu() { return $(...).animate().promise() }

$.when(hideButton).then(showMenu)