Question

我第一次使用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;'
    });
}); 


});

我也做了一个小提琴：https://jsfiddle.net/c1he2vb8/4/

请饶我，我还是个菜鸟。

Answer 1

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

为了解决此问题，您需要将e.stopPropagation()添加到单击按钮，该按钮将停止委派并仅执行＆＃34;点击我＆＃34;的点击方法。按钮：

$(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函数都会被触发，因为它们相互叠加。

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

guard let ressourceURL = testBundle.url(forResource: "TestData", withExtension: "xml")

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

jQuery动画的一些问题

2 个答案: