如何在按钮单击时动画我的div滑动

Question

我遇到了问题，我设法让一些代码让div元素向上滑动到视图但是如果单击关闭按钮，我怎么能让它再次向下滑动？所以我可以继续按下链接，它会再次播放动画，而不是只显示已经处于最终位置的div。

继承了jquery代码

$(document).ready(function() { 

//select all the a tag with name equal to modal
$('a[name=modal]').click(function(e) {
    //Cancel the link behavior
    e.preventDefault();
    //Get the A tag
    var id = $(this).attr('href');

    //Get the screen height and width
    var maskHeight = $(document).height();
    var maskWidth = $(window).width();

    //Set height and width to mask to fill up the whole screen
    $('#mask').css({'width':maskWidth,'height':maskHeight});

    //transition effect    
    $('#mask').fadeIn(600);   

    //Get the window height and width
    var winH = $(window).height();
    var winW = $(window).width();

    //Set the popup window to center
    $(id).css('top',  winH/2-$(id).height()/2);
    $(id).css('left', winW/2-$(id).width()/2);

    //Slide up Boxes Div transition effect
    $(id).css({display:'block'}).animate({marginTop:'0px', opacity:'1', },400);

});

//if close button is clicked
$('.window .close').click(function (e) {
    //Cancel the link behavior
    e.preventDefault();
    $('#mask, .window').hide();
});    

//if mask is clicked
$('#mask').click(function () {
    $(this).hide();
    $('.window').hide();
});        

});

感谢

Answer 1

你可以做与滑动元素相反的操作：

$('.window .close').click(function (e) {
    //Cancel the link behavior
    e.preventDefault();
    $(this).closest('.window').animate({
        marginTop : 1200,
        opacity   : 0
    }, 400, function () {
        $(this).css('display', 'none');
    });
}); 

您的代码中存在一些错误：

1. .animate({marginTop:'0px', opacity:'1', },400)有一个尾随逗号，会在Internet Explorer中强制出错，它应该是：.animate({marginTop:'0px', opacity:'1' },400)。
2. 您在同一元素上连续两次调用.css，您可以将对象传递给.css函数，就像在代码中进一步向下传递一样：

$(id).css({
    top     : winH/2-$(id).height()/2,
    left    : winW/2-$(id).width()/2,
    display : 'block'
}).animate({marginTop:'0px', opacity:'1' },400);

注意我还链接了.animate()函数调用，这样您只需选择$(id)一次。

.slideUp（）和.slideDown（）

你知道jQuery已经有了这样做的功能吗？

• .slideUp()：http://api.jquery.com/slideup
• .slidedown()：http://api.jquery.com/slidedown
• .slideToggle()：http://api.jquery.com/slidetoggle

更新

以下是您的jsfiddle的更新版本：http://jsfiddle.net/4hw8H/1/

$(function() { 

    $('a[name=modal]').click(function(e) {
        e.preventDefault();

        var $this      = $($(this).attr('href')),
            winH       = $(window).height(),
            winW       = $(window).width(),
            maskHeight = $(document).height(),
            maskWidth  = $(window).width();

        $('#mask').css({
            width  : maskWidth,
            height : maskHeight
        }).fadeIn(600);   

        $this.css({
            top     : winH / 2 - $this.height() / 2,
            left    : winW / 2 - $this.width() / 2,
            display : 'block'
        }).animate({
            marginTop : 0,
            opacity   : 1
        }, 400);

    });

    $('.window .close').click(function (e) {
        e.preventDefault();
        $(this).closest('.window').animate({
            marginTop : 1200,
            opacity   : 0
        }, 400, function () {
            $(this).css('display', 'none');
        });
        $('#mask').fadeOut(600);
    });    

    $('#mask').click(function () {
        $('.window .close').trigger('click');
    });        

});