Question

我正在尝试组建一个使用Jquery进行大量动画制作的微型网站。页面上有4个链接，每个链接都打开了一个灯箱。

我希望在背景变暗后使用'show'功能显示灯箱 - 此时此功能正常。然而，当灯箱关闭时，我希望它在黑暗背景淡出之前隐藏。出于某种原因，当执行“隐藏”功能时，灯箱面板会在缩小之前延伸到页面底部，并且背景会同时消失，而不是等到隐藏功能完成（尽管已将淡入功能写入隐藏的回调）

我是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);
  }
 );
})

}）

Answer 1

试试这个：

$(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);
    }
   );
  })
});

Answer 2

在更一般的层面上，在调试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？如果who-panel消失了，你将无法看到animation1！

JQuery的“隐藏”功能表现得很奇怪

2 个答案: