Question

我正在使用jquery为div设置动画，但是当我尝试单击图标来关闭它时，动画会执行持续时间，但之后会恢复原状。

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-items）。点击正方形后，我会为宽度和高度设置动画（该顺序似乎不会对问题产生影响）。然后我检测到是否点击了i标签，一旦点击，想法就是＆＃34;撤消＆＃34;我最初做的改变。

有更简单的方法吗？我对jquery相当新鲜。

Codepen

Answer 1

问题是click事件正在传播到父容器。只需参加活动，并阻止它传播。这可以通过对Event.stopPropagation()的简单javascript调用来完成。

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

另外，请注意在点击方法之后链接css方法可能不是你想要的。你应该把css调用放在事件回调中。

Answer 2

之所以反弹是因为＆＃34; i＆＃34;标签位于＆＃34; flex-items＆＃34; div因为点击弹性项目会触发打开动画，它会打开很好但是当你点击＆＃34; i＆＃34;标签用于关闭关闭动画，它正在工作，以后再次触发弹性项目事件，因为你的＆＃34; i＆＃34;标签位于flex-items内部，因此移动

＆＃13;

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

＆＃13;

从flex项目div中它将正常工作。并确保使用类或id引用显示i标记，当前代码引用为

＆＃13;

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

＆＃13;

将<i>标记放在外面时，应该注意这一点。

Jquery动画最初工作，但在尝试撤消动画时，它会一直弹回

2 个答案: