JQuery 'Hide' 函数行为异常答案

【问题标题】：JQuery 'Hide' function acting strangelyJQuery 'Hide' 函数行为异常
【发布时间】：2012-07-25 16:24:33
【问题描述】：

我正在尝试建立一个使用 Jquery 来制作许多动画的微型网站。页面上有 4 个链接，每个链接打开一个灯箱。

我希望灯箱在背景变暗后使用“显示”功能出现 - 目前这工作正常。但是，当灯箱关闭时，我希望它在深色背景消失之前隐藏起来。由于某种原因，当执行'hide'功能时，灯箱面板在缩小之前延伸到页面底部，背景同时淡出，而不是等到隐藏功能完成（尽管淡出已经写入隐藏回调）

我是 Jquery 的新手，所以我知道我在某处弄错了，但如果有人能提供帮助，我将不胜感激。

其中一个灯箱面板的 Jquery 代码如下所示。要查看当前的微型站点并查看 HTML 源代码，请访问：

http://testing.xenongroupadmin.com/whatis/pfi

到目前为止，我只为其中一个灯箱编写了代码 - 点击左上角标题为“谁需要知道”的框。

任何帮助将不胜感激！

谢谢！

JQuery 代码

$(document).ready(function(){

$("a#show-whopanel").click(function(){
 $("#lightbox, #who-panel").fadeIn(300, function(){
  $("div#animation1").show(600);
  })
 })

$("a#close-panel").click(function(){
 $("div#animation1").hide(600, function(){
  $("#lightbox, #who-panel").fadeOut(300);
  }
 );
})

})

【问题讨论】：

为什么同时使用 show&fadeIn 或 hide&fadeOut？它们都具有回调，并且都可以具有相同动画的持续时间。使用显示/隐藏或淡入/淡出

标签： jquery html

【解决方案1】：

在更一般的层面上，在调试 jQuery 时，将回调函数去掉，看看基本效果是否起作用。

所以，你的闭包如下：

$("a#close-panel").click(function(){
   $("div#animation1").hide(600, function(){
       $("#lightbox, #who-panel").fadeOut(300);
   });
});

它基本上说：点击时，(1) 隐藏动画 1，当隐藏完成时，(2) 淡出灯箱和 who-panel。

要调试，您需要检查它的作用：

$("a#close-panel").click(function(){
   $("div#animation1").hide(600);
});

然后检查它的作用：

$("a#close-panel").click(function(){
       $("#lightbox, #who-panel").fadeOut(300);
});

然后你就会知道什么在做什么，以及哪种效果使 div 在消失之前增大了大小。

您还缺少一些分号，尽管这应该没问题。

编辑：仔细观察，你为什么要使用回调？你不想摆脱灯箱和面板吗？你为什么隐藏动画1？如果 who-panel 淡出，你无论如何都看不到动画1！

【讨论】：

【解决方案2】：

试试这个：

$(document).ready(function(){
  $("a#show-whopanel").click(function(){
   $("#lightbox, #who-panel").fadeIn(300, function(){
    $("div#animation1").show(600);
    })
   })
  $("a#close-panel").click(function(){
   $("#lightbox, #who-panel").fadeOut(300, function(){
    $("div#animation1").fadeOut(600);
    }
   );
  })
});

【讨论】：