jQuery 动画的一些问题

Question

我第一次使用 jQuery 工作，我正在尝试在 div 上制作动画。第一个动画很顺利，但第二个动画（当我想 return 和 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/

请饶了我吧，我还是菜鸟

Answer 1

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

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

$(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

Answer 2

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

我删除了一个并添加了一个活动 class 使用 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/

jQuery 动画的一些问题

Some problems with a jQuery animation

html

css

jquery

jquery-animate