jquery动画最初工作，但当试图撤消动画，它一直弹回

我正在使用jquery动画div，但当我尝试点击图标关闭它，动画执行的持续时间，但然后恢复回。jquery动画最初工作，但当试图撤消动画，它一直弹回

HTML：

<div class="flex-container"> 
    <div class="flex-items"><i class="fa fa-reply fa-2x"></i></div> 
</div>

CSS：

.flex-container{ 
    display: flex; 
    width: 80vw; 
    margin: 0 auto; 
    padding-top: 200px; 
    flex-flow: row wrap; 
    justify-content: center; 
} 
.flex-items{ 
    width: 300px; 
    height: 300px; 
    border: 1px solid black; 
} 
i{ 
    visibility: hidden; 
    float: right; 
}

的jquery：

$(document).ready(function(){ 
    $(".flex-items").click(function(){ 
     $(this) 
     .animate({ 
      width: '+=800px', 
      height: '+=400px'},{ 
      duration: 300, 
      ease: "linear"}) 
     .css("order", "1"); 

     i = $(this).children(); 
     $(i).css("visibility" ,"initial"); 
     currentFlexItem = $(this); 
    }); 

    $("i").click(function(){ 
      $(".flex-items").animate({ 
      width: '300px', 
      height: '300px'},{ 
      duration: 300, 
      ease: "linear"}); 

    }).css("visibility", "hidden"); 
});

我在jQuery代码的想法是第一，检测是否平方（.flex-项目）被点击。一旦点击了正方形，我就会对宽度和高度进行动画处理（顺序看起来对问题没有影响）。然后我检测到i标签是否被点击，点击后，这个想法是“撤销”我最初做出的改变。

有没有更简单的方法呢？我对jquery相当陌生。

Codepen

来源

2016-02-19 Froy

感谢您链接codepen，顺便说一句。使理解和回答你的问题变得更容易。 – vastlysuperiorman

的问题是，所述click事件传播到父容器。只要参加活动，并停止传播。这可以通过简单的JavaScript调用Event.stopPropagation()来完成。

$("i").click(function(evt){ 
    evt.stopPropagation(); 
    $(".flex-items").animate({ 
     width: '300px', 
     height: '300px'},{ 
     duration: 300, 
     ease: "linear"}); 
     $("i").css("visibility", "hidden"); 
});

此外，请注意，点击方法后链接css方法可能不是你想要的。您应该将css调用放入事件回调中。

来源

2016-02-19 04:48:57 vastlysuperiorman

谢谢！我必须阅读.stopPropagation（）。 – Froy

好吧，让我为你添加一些参考:) – vastlysuperiorman

它反弹的原因是因为“i”标签位于“flex-items”div内，因为打开的动画是通过单击flex-items触发的，它将打开状态良好，但是当您单击“i”的标签，它是用于关闭关闭动画它以后的工作柔性项事件再次被触发，因为你的“我”的标签是内部柔性项目，以便移动

<i class="fa fa-reply fa-2x"></i>

出来的Flex项目div它将正常工作。并确保您展示使用类或id引用您的当前代码参考我的标签是

i = $(this).children(); 
 
     $(i).css("visibility" ,"initial");

这应当理解，当你外面放置<i>标签的照顾。

来源

2016-02-19 04:53:13 BlackBurn027

jquery动画最初工作，但当试图撤消动画，它一直弹回

回答

相关问题