1

我正在尝试建立一个使用 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);
  }
 );
})

})

4

2 回答 2

1

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

因此，您的关闭如下：

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

它基本上说：点击时，（1）隐藏动画1，隐藏完成后，（2）淡出灯箱和面板。

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

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

然后检查这是做什么的：

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

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

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

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

于 2012-07-25T08:14:21.277 回答
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);
    }
   );
  })
});
于 2012-07-25T08:03:30.240 回答