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)

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

2 个答案: