javascript - jQuery 点击重复两次

Question

我创建了一个框，当用户点击按钮时会出现。单击按钮后，会出现一个带有动画的框。该框内有一个关闭按钮。按下关闭按钮，再次按下打开按钮动画不会重复。

为什么会这样？

我在下面有一个 JS fiddle 文件的链接:

https://jsfiddle.net/harryB/va2r1pkm/

这是 jQuery。

$('body').on('click', '.modal-button', function () {

// show box and bg on click of button

var el = $('#modal-bg').fadeIn();

$('.modal-box').animate({

    top: "+=300"
}, 1000, function (event) {

    event.preventDefault();

});


});
$('.modal-box .fa').on('click', function () {
    // show box and bg on click of button
    $('#modal-bg').fadeOut();

});

Answer 1

您可以每次都将动画重置到顶部:

$('.modal-box').css('top',0).stop(0,0).animate({

JSFiddle

$('body').on('click', '.modal-button', function () {
    // show box and bg on click of button    
    var el = $('#modal-bg').fadeIn();

    $('.modal-box').css('top', 0).stop(0, 0).animate({              // <--- this line
        top: "+=300"
    }, 1000, function (event) {
        event.preventDefault();
    });
});

$('.modal-box .fa').on('click', function () {
    // show box and bg on click of button
    $('#modal-bg').fadeOut();
});