Question

我创建了一个在用户点击按钮时显示的框。单击按钮后，会出现一个带有动画的框。盒子里面有一个关闭按钮。按下一个关闭按钮，再次按下打开按钮，动画不会重复。

为什么会这样？

我有一个链接到下面的JS小提琴文件：

这是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();
});

Answer 2

我想这就是你要找的东西：

进行了一些更改，例如margins和top位置。

Working : DEMO

<强>段

// create a modal that appears once button is pressed.
// modal has a close button within.
// background is covered modal so modal stands out.

$('body').on('click', '.modal-button', function () {

    // show box and bg on click of button
    
    var el = $('#modal-bg').fadeIn();
  
    $('.modal-box').animate({

        top: "200px" // Chnaged top position value. You can define whatever you want.
    }, 1000);
      
});
$('.modal-box .fa').on('click', function () {
    // show box and bg on click of button
    $('.modal-box').animate({"top":"-100vh"},800);
    $('#modal-bg').fadeOut();
});

#modal-bg {
    width:100%;
    height:100vh;
    background:rgba(234, 234, 234, 0.66);
    position:absolute;
    top:0px;
    left:0px;
    display:none;
}
.modal-box {
    padding:20px;
    width:300px;
    margin:0px auto 50px auto; /* Changed Top Margin to 0 */
    background:green;
    position:relative;
    text-align:center;
    /* Removed Top Margin */
}
.modal-box .fa {
    float:right;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<button class="modal-button">Read More</button>
<div id="modal-bg">
    <div class="modal-box"> <i class="fa fa-times-circle"></i>

         <h1> Modal Title </h1>

        <p>Information about website!</p>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

Answer 3

之所以发生这种情况，是因为你只是在没有删除之前添加的300px的情况下fadeOut。关闭时添加：

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

        top: "-=300"
    }, 1000, function () {
        $('#modal-bg').fadeOut();

    });

选中此https://jsfiddle.net/va2r1pkm/1/

jQuery点击重复两次

3 个答案:

JSFiddle