我如何动画我的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)。

：

你在同一个元素上连续两次拨打.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

UPDATE

这是你的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'); 
    });   

});