Fatal编程技术网
  • javascript/
  • Javascript jquery'；显示'+'；制作动画'；仅在第一次单击时工作

Javascript jquery'；显示'+'；制作动画'；仅在第一次单击时工作

javascript jquery

Javascript jquery'；显示'+'；制作动画'；仅在第一次单击时工作,javascript,jquery,jquery-animate,show,Javascript,Jquery,Jquery Animate,Show,我在一起使用show和animate时遇到了一些麻烦。我希望该框在每次单击我的ID时显示并淡入，在单击页面的任何其他部分时淡出。 但是，当它处于“动画到不透明度”状态时：“1”仅在第一次单击时起作用 这是我学习jQuery（/javascript）的第三天，这是我学到的大部分内容，所以如果您能提供更多的简单答案，我将不胜感激：） 相关HTML： <html> <head> <script src="https://code.jqu

我在一起使用show和animate时遇到了一些麻烦。我希望该框在每次单击我的ID时显示并淡入，在单击页面的任何其他部分时淡出。 但是，当它处于“动画到不透明度”状态时：“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>
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>


$（文档）.ready（函数（）{
变量my_id=[“EWF20”、“EWF20-1”、“EWF20-2”、“EWF20-3”]
$（“html”）。在（'click'，my_ID，函数（e）{
if（我的id包括（如target.id））{
log（“做我的梦！”）
}
/*>>目标对象（单击）的id是否包含在我的\u id中*/
如果（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）；
}否则{
$（“EWF20额外”）。淡出（1000）；
}
});
});
非常感谢您的帮助！：）

您的
不透明度
是问题所在，因为
淡出
使用
显示

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);
    }
注意我删除了
不透明度

#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之前，最好先对其进行格式化。这样可以更容易阅读。

您的
不透明度是个问题，因为
淡出
使用
显示


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);
    }


注意我删除了
不透明度


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


此外，您还有（2）个其他问题。在您的元素中，
EWF20-1
，有一个
href
，这意味着如果您单击它，它会将用户重定向到端点，因此该元素（
a
标记）不适用于show/hide。此外，我建议将目标定位于类，
体验描述突出显示
，而不是使用ID（如果该类不用于任何冲突的其他JS事件）

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


最后但并非最不重要的一点是，在提交给stackoverflow之前，最好对HTML/JS/CSS等进行格式化。除其他外，这样更易于阅读。
既然您写的是学习jQuery，我建议您使用更多的类和HTML5标记，而不是ID。此外，代码还可以获得一些性能优化

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



var$content=$（“#content”）；
$（'folio experience'）。打开（'click'，切换淡入淡出）；
功能切换淡入淡出（e）{
$content.find（$（e.currentTarget）.data（'target'））.fadeToggle（1000）；
}


。有工作经验{
右边填充：20px；
文本对齐：右对齐；
}
.对开本体验内容{
显示：无；
顶部：300px；
填充：20px；
边界半径：50px；
文本对齐：居中；
边框：1px虚线；
}



--数字制作人
EWF20的在线馆长，澳大利亚最知名、最受尊敬的网站之一
文学节
你好~~~

既然您写的是学习jQuery，我建议您使用更多的类和HTML5标记，而不是ID。此外，代码可以获得一些性能优化

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



var$content=$（“#content”）；
$（'folio experience'）。打开（'click'，切换淡入淡出）；
功能切换淡入淡出（e）{
$content.find（$（e.currentTarget）.data（'target'））.fadeToggle（1000）；
}


。有工作经验{
右边填充：20px；
文本对齐：右对齐；
}
.对开本体验内容{
显示：无；
顶部：300px；
填充：20px；
边界半径：50px；
文本对齐：居中；
边框：1px虚线；
}



--数字制作人
EWF20的在线馆长，澳大利亚最知名、最受尊敬的网站之一
文学节
你好~~~

您这样做有什么原因吗？而不是使用
.fadeIn（）
？您遇到的问题是因为
不透明度：1
被遗留在对象上。当已经有一个函数可以使用时，创建一个解决方案将变得更加复杂。没有其他原因，这是我正在学习的第一个javascript/jQuery，我观看了演示动画不透明度的教程阿瑟·法登。我改为法登，现在它工作得很好！谢谢所有的回答，太好了！我想可能有这样做的要求，这就是为什么我想在为您制定解决方案之前检查一下。看到您可以使用法登，那么一定要这样做