Question

我正在开发一个简单的功能，当用户点击关闭按钮时隐藏消息。奇怪的是，当我使用这个代码时，一切正常，除了奇怪的7秒延迟。我将div设置为在1000毫秒内转换为0不透明度，然后更改z-index以将其置于后面的所有内容之后。除了不透明度转换的延迟之外，这一切都正常。使用此代码时：

$(".x").bind("click",function() {
    $('#holder').animate({opacity: "0"}, 1000, "easeOutQuart");
      setTimeout(function() {
        $('#holder').css('z-index','-1');}, 1000);

我得到了大约7秒的无法解释的延迟。如果我将代码更改为：

$(".x").bind("click",function() {
    $('#holder').css('display','none');
          setTimeout(function() {
            $('#holder').css('z-index','-1');}, 1000);

效果是即时的。显然，setTimeout函数对于显示器来说太过分了，但我只是从我所知道的那里显示它与时序问题无关。

有人问为什么不使用fadeOut（）并且没有理由不这样做，但它不会改变延迟问题。使用此代码仍有大约7秒的延迟：

$(".x").click(function () {
  $("#holder").fadeOut("slow");
  });

我尝试了很多东西，包括在动画之前添加.stop（）调用。虽然延迟令人困惑，但该功能可以作为一个整体。单击.x时，＃holder div将消失（延迟后），然后z-index将更改为其余div之后。我很满意这个功能和方法，只是混淆了为什么会出现如此剧烈的延迟。我能想到的唯一其他项目是代码全部在php文件中并通过使用。不知道为什么会改变它。

关于这个的任何想法？

Answer 1

这应该有效：

$(".x").bind("click",function() {
    $('#holder').animate({opacity: "0"}, 1000, "easeOutQuart",function(){
        $(this).css('z-index',-1);
    });
});

我不明白在opacity属性上使用“easeOutQuart”的目的，并且不知道你期望什么效果。顺便说一句，我建议你使用fadeOut()而不是动画。

<强>更新

不确定您的问题是什么，但请尝试这个，具体取决于您的HTML代码：

$(".x").click(function (e) {
  e.stopPropagation();
  $("#holder").fadeOut("slow");
  });

奇怪的jQuery动画延迟

1 个答案: