为什么fadeIn（）对于我单击的第一个图像不起作用，但是在起作用之后我又如何工作了？

这是我的代码：

 

//问题：用户在点击图片时陷入僵局

//解决方案：创建带有大图片的叠加层-灯箱

//声明的变量

var $ overlay = $（' < div id = “ overlay” > </ div > '）;

var $ image = $（“ < img > ”）;

变量$字幕= $（ “ < p > </ p > ”）;

var $ presentation = false;

//在覆盖$ overlay.append（$ image）之后添加了html元素

；

$ overlay.append（$ caption）;

 

  

$（“ body”）。append（$ overlay）;

//捕获图像上的点击事件

$（“＃imageGallery a”）。click（function（event）{

   //将演示文稿设置为true

   $ presentation = true;

   //如果为true

   if（$ presentation === true）

   {

   //阻止默认图片位置

  event.preventDefault（）;

   var imageLocation = $（this）.attr（“ href”）;

   $ image.attr（“ src”，imageLocation）;     $ overlay.show 

 （）;

       var captionText = $ （this）.children（“ img”）。attr（“ alt”）;

       $ caption.text（captionText）;

       $ image.fadeIn（“ slow”）;

       $ caption.fadeIn（“ slow”）;

       presentation = false;

 

//显示叠加层

//如果点击叠加层，则

$ overlay.click（function（）{

       $ presentation = false;

       $ overlay.hide（）;

       $ caption.fadeOut（“ fast”）;

       $ image.fadeOut（“ fast “）;

 }）;

 

 

答：您需要添加显示：在style.css中的#overlay img和#overlay p中都没有显示