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

我有一段代码：

$("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);
});

如何对效果进行排序，使其按顺序进行？此时，所有效果将同时转换

---

感谢

jQuery的

。隐藏

和

显示

函数允许您指定完成后要执行的函数。语法是

.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');
});

你有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)

---

有不同的方法来排序您想要实现的动画效果，您可以使用setTimeout或$.delay（）可能的副本