JQuery 'Hide‘函数作用奇怪

Question

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

我希望在背景变暗后，使用“显示”功能来显示灯箱--此时这个功能很好。然而，当灯箱关闭时，我希望它能在黑暗背景消失之前隐藏起来。由于某些原因，当执行“隐藏”函数时，lightbox面板扩展到页面底部，然后收缩，并且背景会同时消失，而不是等到隐藏函数完成(尽管隐藏的回调已经写进了淡出)。

我刚开始使用Jquery，所以我知道我在某个地方弄错了，但是如果有人能帮忙的话，我将非常感激。

其中一个lightbox面板的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);
  }
 );
})

})

Answer 1

在更一般的级别上，在调试jQuery时，删除回调函数并查看基本效果是否有效是值得的。

因此，您的结论如下：

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

它基本上是说:点击，(1)隐藏animation1，当隐藏已经完成，(2)淡出灯箱和谁-面板。

要进行调试，您需要检查它做了什么：

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

然后检查它做了什么：

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

然后你就会知道什么在做什么，以及在它消失之前，是什么作用使div的大小增加了。

你也少了一些分号，不过应该没问题。

编辑:仔细观察，你为什么要使用回调？你难道不想摆脱灯箱和人造板吗？你为什么把animation1藏起来？如果世界卫生组织的面板已经褪色，你将无法看到animation1无论如何！

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