divをアニメーション化してボタンをクリックしてスライドさせるにはどうすればいいですか？

Question

問題がありますが、div要素をビューにスライドさせるコードをいくつか作成できましたが、閉じるボタンクリックされましたか？私はリンクを押し続けることができるので、アニメーションをもう一度再生するのではなく、最後の位置にdivを表示するだけです。

HERESに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. には、Internet Explorerでエラーが発生する末尾のカンマがあります。.animate({marginTop:'0px', opacity:'1' },400)である必要があります。
2. 、あなたのコード内でさらに下行うようにあなたが同じ要素に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); 

私はまた、あなたが一度だけ$(id)選択し、このように.animate()関数呼び出しを連鎖さに注意してください。

.slideUp（）と.slideDown（）

あなたはjQueryのは、すでにこれを行う機能を持っていることを知っていますか？

• .slideUp()：http://api.jquery.com/slideup
• .slidedown()：http://api.jquery.com/slidedown
• .slideToggle()：http://jsfiddle.net/4hw8H/1/
  ：http://api.jquery.com/slidetoggle

UPDATEここ

はあなたのjsfiddleの更新版です210

$(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'); 
    });   

});