버튼을 클릭 할 때 내 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).

을 : 당신은 당신의 코드에서 더 아래처럼 당신은 두 번 같은 요소에 연속으로 .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://jsfiddle.net/4hw8H/1/
  ,691,363 : 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'); 
    });   

});