动画开始有延迟

animation starts with delay

本文关键字：延迟 开始 动画      更新时间：2023-09-26

我已经编写了从外部PHP文件加载内容的脚本。我使用jquery1-9-1。我的脚本工作正常，除了那一刻，当我点击按钮第二次。动画开始前有0.5s的延迟。我想我知道问题出在哪里了。$("#header").animate({marginTop: "10px"...必须在第一次点击时执行。单击此按钮一次后，必须将其停用。谁知道怎么解?别这么苛刻地评判我，对不起我的英语

$(document).ready(function () {
    var content = $("#content");
    $("#main_menu a").click(function () {
        var id = this.id;
        $("#header").animate({
            marginTop: "10px"
        }, 500, function () {
            $("#content").fadeOut(500, function () {
                $("#content").load(id + ".php")
                $("#content").fadeIn(500)
            })
        })
    })
})

我不得不问，缓存content = $("#content")的意义是什么，如果你然后拒绝使用它，只是反复调用$("#content")以后?

无论如何，你需要一个变量来告诉它是否是第一次运行:

    $(function () {
        var content = $("#content"), isfirst = true;
        $("#main_menu a").click(function () {
            var id = this.id,
                reveal = function() {
                    content.fadeOut(500, function () {
                        content.load(id + ".php")
                        content.fadeIn(500)
                    });
                };
            if( isfirst) $("#header").animate({marginTop: "10px"}, 500, reveal);
            else reveal();
            isfirst = false;
        });
    });

在这种情况下，您需要跟踪它是否已加载。一个简单的变量和一些闭包应该可以做到:

var isLoaded = false;
$("#main_menu a").click(function () {
          var id = this.id;
          if (!isLoaded) {
              $("#header").animate({
                 marginTop: "10px"
              }, 500);
              isLoaded = true;
          }
          $("#content").fadeOut(500, function () {
          $("#content").load(id + ".php")
          $("#content").fadeIn(500)
       })
  });
相关文章：