jQuery 做事乱七八糟答案

【问题标题】：Jquery doing things out of orderjQuery 做事乱七八糟
【发布时间】：2014-10-12 02:35:45
【问题描述】：

我正在做一个项目，该项目将有一个滑出菜单，单击菜单项时页面会变暗，移动一些 div，然后返回屏幕以查看。我已经通过使用 .animate 将不透明度设置为 1 的全屏、固定位置 div 来完成此操作，使用 .css 移动我的 div，然后将全屏 div 动画化回不透明度 0。虽然这一切似乎都有效，但它不能按顺序工作。该代码首先运行所有 .css 命令，然后运行所有 .animate 命令。

$("#overlay").animate({"opacity":"1"}, "slow")
$(".main").css({"left":"-100%"})
$(".section").css({"left":"-100%"})
$(".pink").css({"left":"0"})
$("#overlay").animate({"opacity":"0"}, "slow")

代码顺序正确，但是 .main div 移出屏幕，所有 .section div 移出屏幕，.pink div 移到屏幕上，然后 #overlay opacity 设置为 1，然后 #覆盖不透明度设置为 0。

为什么所有的 .css 动作都会触发，然后是 .animate 动作？我该如何让它们按顺序发生？

【问题讨论】：

您可能需要为此使用 jQuery callbacks。

标签： jquery html css

【解决方案1】：

.animate() 是一个异步函数，所以.animate() 之后的语句在动画完成之前运行。你可以使用完整的回调来解决这个问题

$("#overlay").animate({
    "opacity": "1"
}, "slow", function () {
    $(".main").css({
        "left": "-100%"
    })
    $(".section").css({
        "left": "-100%"
    })
    $(".pink").css({
        "left": "0"
    })
    $(this).animate({
        "opacity": "0"
    }, "slow")
})

【讨论】：

【解决方案2】：

你需要学习如何使用callbacks，在动画结束时调用回调

$("#overlay").animate({"opacity":"1"}, "slow",
 //from here is the callback function that is invoked when animation finishes
function(){ 
      $(".main").css("left":"-100%");
      $(".section").css("left":"-100%");
      $(".pink").css("left":"0");
      $(this).animate({"opacity":"0"}, "slow");
});

【讨论】：