我如何動畫我的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'); 
    });   

});