时间戳

首页 > 解决方案 > jquery 'show' + 'animate' 仅适用于第一次点击

javascript - jquery 'show' + 'animate' 仅适用于第一次点击

问题描述

我在将 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>

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

标签： javascriptjqueryjquery-animateshow

解决方案

你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 之前对其进行格式化。除其他外，使其更易于阅读。

推荐阅读