Question

我正在开发一个具有滑出菜单的项目，当单击菜单项时会使页面变暗，移动一些div，然后返回屏幕进行查看。我用全屏，固定位置div完成了这个，使用.animate将不透明度设置为1，用.css移动我的divs然后.anan全屏幕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不透明度设置为1，然后＃叠加不透明度设置为0.

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

Answer 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")
})

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

Jquery不按顺序做事

2 个答案: