jquery 'show' + 'animate' 仅适用于第一次点击答案

【问题标题】：jquery 'show' + 'animate' only working on first clickjquery 'show' + 'animate' 仅适用于第一次点击
【发布时间】：2020-07-08 05:32:23
【问题描述】：

我在同时使用 show 和 animate 时遇到了一些问题。我希望该框在每次 my_ids 被点击时显示和淡入，并在页面的任何其他部分被点击时淡出。但就目前而言，动画不透明：“1”仅适用于第一次点击。

这是我学习 jQuery (/javascript) 的第三天，这是我所学的大部分内容，因此非常感谢您提供更多愚蠢的答案 :)

相关HTML：



     <html>
  <head>
    <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
          <link type="text/css" rel="stylesheet" href="stylesheet-june3.css">

    
  </head>
  
  <body>
    <div class="folio-experience-4" id="EWF20">
                  <div class="experience-title-highlight" id="EWF20-1">
                          <a href="https://emergingwritersfestival.org.au/emerging-writers-festival/">Emerging Writers' Festival</a><br>
                    <div class="experience-title-highlight" display="inline" style="text-align:right; padding-right:20px;" id="EWF20-3">-- Digital Producer
                    </div>
                  </div>
                  <div class="experience-description-highlight" id="EWF20-2">
                        ONLINE CURATOR FOR EWF20, ONE OF AUSTRALIA'S MOST ESTABLISHED AND WELL-RESPECTED
                         LITERARY FESTIVALS
                  </div>
    </div>
    <div class="content-righthand-1-5">
      <div id="EWF20_extra">
        hello ~~~
      </div>
    </div>
  </body>
  
</html>

CSS：

#EWF20_extra{
  top:300px;
  display:none;
  border: 1px dashed;
  border-radius:50px;
  text-align: center;
  padding: 20px;
  opacity: 0;
}

jQuery /javascript:

 <script>
    
         $(document).ready(function(){
        
       var my_ids = ["EWF20", "EWF20-1", "EWF20-2", "EWF20-3"]
       
        $("html").on('click', my_ids, function(e) {
          
          if (my_ids.includes(e.target.id)) {
            console.log("Doing my thang!")
          }
          /* >> is the id of the thing targeted (clicked on) included in my_ids */
          if (e.target.id == "EWF20" || e.target.id == "EWF20-1" || e.target.id == "EWF20-2" || e.target.id == "EWF20-3"){
            $("#EWF20_extra").show().animate({opacity: '1'}, 2000);
          } else {
            $("#EWF20_extra").fadeOut(1000);
          }
        });
      }); 
    
  </script>

非常感谢您的帮助！ :))

【问题讨论】：

你这样做有什么理由吗？而不是使用.fadeIn()？您遇到的问题是因为 opacity:1 被留在对象上。当您已经有一个可以使用的功能时，创建一个变通方案会变得更加复杂。
除了这是我正在学习的第一个 javascript / jQuery 之外，没有其他原因，我观看了一个演示动画不透明度而不是淡入淡出的教程。我更改为fadeIn，现在效果很好！感谢所有答案
啊，太好了！我认为可能需要这样做，这就是为什么我想在为您制定解决方案之前进行检查。看到你可以使用fadeIn，那当然可以这样做:)

标签： javascript jquery jquery-animate show

【解决方案1】：

您的opacity 是问题所在，因为fadeOut 使用display。

if (e.target.id == "EWF20" || e.target.id == "EWF20-1" || e.target.id == "EWF20-2" || e.target.id == "EWF20-3") {
      $("#EWF20_extra").fadeIn(1000);
    } else {
      $("#EWF20_extra").fadeOut(1000);
    }

注意我删除了opacity

#EWF20_extra{
  top:300px;
  border: 1px dashed;
  border-radius:50px;
  text-align: center;
  padding: 20px;
  display: none;
}

此外，您还有 (2) 个其他问题。在您的元素EWF20-1 中有一个href，这意味着如果您单击它，它会将用户重定向到端点，因此该元素（a 标记）将无法用于显示/隐藏。此外，我建议以 experience-description-highlight 类为目标，而不是使用 ID（如果该类不会用于任何冲突的其他 JS 事件）。

我建议使用类而不是 ID 的原因是 b/c，如果您添加另一个“元素”，您将不必硬编码您的 JS 脚本（您已经在使用您的 ID 进行了，因为您的目标不是容器，而是 ID 数组。因此最好使用类名。

最后但同样重要的是，最好先格式化 HTML/JS/CSS 等，然后再将其提交到 stackoverflow。使其更易于阅读等。

【讨论】：

【解决方案2】：

既然你写的是你正在学习 jQuery，我建议你使用更多的类和 HTML5 标记而不是 ID。进一步代码可以得到一些性能优化。

此外，您可以简单地使用fadeToggle 而不是fadeIn 和fadeOut。也许我的例子可以帮助你。

var $content = $('#content');

$('.folio-experience').on('click', toggleFade);

function toggleFade(e) {
  $content.find($(e.currentTarget).data('target')).fadeToggle(1000);
}

.experience-job {
  padding-right: 20px;
  text-align: right;
}

.folio-experience-content {
  display: none;
  top: 300px;
  padding: 20px;
  border-radius: 50px;
  text-align: center;
  border: 1px dashed;
}

<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>

<div class="folio-experience" data-target="#EWF20">
  <div class="experience-title">
    <a href="https://emergingwritersfestival.org.au/emerging-writers-festival/">
      Emerging Writers' Festival
    </a>
    <div class="experience-job">
      -- Digital Producer
    </div>
  </div>
  <div class="experience-description">
    ONLINE CURATOR FOR EWF20, ONE OF AUSTRALIA'S MOST ESTABLISHED AND WELL-RESPECTED
    LITERARY FESTIVALS
  </div>
</div>
<div id="content" class="content-righthand">
  <div id="EWF20" class="folio-experience-content">
    hello ~~~
  </div>
</div>

【讨论】：