0

我正在开发一个简单的功能，以在用户单击关闭按钮时隐藏消息。奇怪的是，当我使用这段代码时，一切正常，除了一个奇怪的 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 文件中并通过 . 想不出为什么那会改变它。

关于这个有什么想法吗？

4

1 回答 1

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");
  });
于 2013-01-03T10:16:40.647 回答