jQuery 动画的一些问题答案

【问题标题】：Some problems with a jQuery animationjQuery 动画的一些问题
【发布时间】：2016-09-21 08:35:59
【问题描述】：

我是第一次使用 jQuery，我正在尝试在 div 上制作动画。第一个动画效果很好，但第二个动画（当我想将 div 返回到其原始位置时它只是重置。我无法弄清楚。

我的 jQuery：

$(document).ready(function() {


// Row one - column one.
$(document).on('click', '#row_one_column_one', function() {

    $('#row_one_column_one').animate({
        left: '35%',
        opacity: '0.9',
        height: '500px',
        width: '500px'
    });

    $('#row_one_column_one_button').fadeIn(750);
}); 

$(document).on('click', '#row_one_column_one_button', function() {
    $('#row_one_column_one_button').fadeOut(250);
    $('#row_one_column_one').animate({
        left: '100px',
        opacity: '0.5',
        height: '250px;'
    });
}); 


});

我也做了一个fiddle：https://jsfiddle.net/c1he2vb8/4/

请放过我，我还是个菜鸟。

【问题讨论】：

只是一个建议。当您对 jquery 感到满意时，请查看 gsap。与 jquery 相比，它可以用更少的代码做更多的事情。编码愉快！

标签： jquery html css jquery-animate

【解决方案1】：

这是因为事件委托（冒泡），父div点击触发并重新执行动画事件，这就是它重置的原因。

为了解决这个问题，您需要将e.stopPropagation() 添加到将停止委托并仅执行“单击我”按钮的单击方法的单击按钮：

$(document).on('click', '#row_one_column_one_button', function(e) {
        e.stopPropagation();
        $('#row_one_column_one_button').fadeOut(250);
        $('#row_one_column_one').animate({
            left: '100px',
            opacity: '0.5',
            height: '250px;'
        });
    });

查看文档以了解事件传播：https://developer.mozilla.org/en/DOM/event.stopPropagation

【讨论】：

【解决方案2】：

您的问题是，在您的第一个动画之后，两个 jQuery 函数都被触发了，因为它们相互重叠。

我删除了一个并使用 jQuery 添加了一个活动类：

    // Row one - column one.
    $(document).on('click', '.test', function() {

        $(this).animate({
            left: '35%',
            opacity: '0.9',
            height: '500px',
            width: '500px'
        });

        $(this).addClass("active");
    }); 

    $(document).on('click', '.test.active', function() {
        $(this).animate({
            left: '100px',
            opacity: '0.5',
            height: '250px;',
            left: '0%',
                    width: '14%',
                    height: '100%',
            opacity: '1'
        });
        $(this).removeClass("active");
    });

https://jsfiddle.net/c1he2vb8/11/

【讨论】：