Question

我试图制作一个灯箱功能，点击链接时会淡入淡出。我可以运行一次。当它运行然后关闭时，它不能再次运行？有点奇怪？我做错了什么？

我的剧本：

<script>
   $(document).ready(function() {
           $('.button1').click(function() {
                  $('#aloe').fadeIn(600);
          });
   });
</script>

代码：

<a class="button1"><img src="{{ 'aloevera.png' | asset_url }}" /></a>


<div id="aloe" style="display: none;"><div id="box1">
          <div id="inner"><a class="exit" onclick='$("#box1").fadeOut(600, function() { $(this).remove(); });'>x</a>
          </div>
        <div class="outer">
          <div class="middle">
            <div class="inner">
              <h1>Organic Aloe Vera Extract</h1>
              Our organic Aloe Vera Extract is from Asia. The polysaccharides act as moisturizers and hydrate the skin. 
              Aloe vera is absorbed into the skin and stimulates the fibroblasts to replicate themselves faster and it 
              is these cells that produce the collagen and elastin fibers, so the skin becomes more elastic and less wrinkled.
            </div>
          </div>
        </div>
    </div></div>

Answer 1

当您使用remove()退出时，您将从DOM中删除＃box1。这意味着当你试图在第二次淡出时它不存在。请改用hide()，因为它只设置一个CSS属性来隐藏容器而不是从DOM中删除容器。

Answer 2

这是因为您将元素淡出后将其删除，因此无法再次显示：

$("#box1").fadeOut(600, function() { $(this).remove(); })

请注意，在内联属性中执行JS是个坏主意。将它放在ready处理程序中，摆脱remove调用。您也可能希望淡出#aloe，而不是#box1：

$(document).ready(function() {
   $('.button1').click(function() {
       $('#aloe').fadeIn(600);
   });

   $('.exit').click(function() {
       $('#aloe').fadeOut(600);
   });
});

Demonstration of working code

带灯箱的脚本只运行一次

2 个答案: