easeOutBounce 효과는 항상

Question

단순히 내가 다른 버튼을 클릭 할 때 내가 버튼을 클릭하면 애니메이션 숨겨진되어야 div이 적용되지 않습니다 : 내가 눈치 무엇

<div id="popup"></div> 
<input type="button" value="show and animate popup" onClick="showWithAnimation()" /> 
<input type="button" value="hide" onClick="aFunction()" /> 



<script>   
function showWithAnimation(){  

       console.log('animation called'); 
       $('#popup') .animate({top:(($(window).height()/2)-($('#popup').outerHeight()/2))-70}, 1000, 'easeOutBounce'); 
      $('#popup').show(); 
      } 

     function aFunction(){//Hide the div 

       $('#popup').hide(); 

      } 
</script> 

, 바운스 효과가 있다는 것이다 처음에 show and animate popup을 클릭 한 다음에 hide 버튼을 클릭 한 다음 show and animate popup 버튼을 다시 클릭하면 div 버튼이 다시 표시되지만 easeOutBounce 효과는 나타나지 않습니다. div에만 적용됩니다. 어떻게 해결할 지 물어봐도 될까요? 고맙습니다.

Answer 1

나는 애니메이션이 실행될 때, 사업부는 페이지의 특정 위치에 있기 때문에 이런 일이 생각 .. 하지만 다시 실행하면 div가 이미 대상 위치에 있으므로 애니메이션/효과가없는 것처럼 보입니다. 그것은 일어나고 있습니다, 그것은 이미 당신이 그것을 움직이려고하는 곳입니다. 먼저 top 및 left 스타일을 특정 값으로 설정해야합니다. 어쩌면 창의 맨 윗부분. 그런 다음 animate과 같은 전화를 겁니다. 이렇게하면 팝업을 표시 할 때마다 팝업 위치가 항상 같은 위치에서 시작되고 같은 위치에서 움직입니다.

그래서 당신은해야합니다 :

$("#popup").css({"top": "whatever", "left": "whatever"}).animate("whatever", "whatever", "whatever").show(); 

UPDATE를 :

당신이 animate를 사용, 그것은 문자 그대로 당신이 그것을 전달하는 특성을 가지고 원래 값에서 선택한 요소 (들) 애니메이션. 따라서 귀하는 top 및 left 스타일에 애니메이션을 적용하고 있습니다. 기본적으로 div는 페이지의 어딘가에 위치합니다. HTML 태그 중간에 숨겨져 있습니다. 따라서 기술적으로는 top과 left은 정의되지 않지만 실제로는 "200, 250"과 같은 일부 유한 값입니다. 애니메이션 효과를 호출하면 점차 원본 (200, 250)에서 animate 호출에 지정된 대상으로 변경됩니다. 따라서 FIRST animate 호출 후 div를 창의 중앙으로 이동 (애니메이션)합니다.그런 다음 팝업을 닫을 수 있습니다 (숨김). 그 후 팝업을 열 때마다 div를 창 가운데로 이동 (애니메이션)하려고 시도하지만 ... 이미 (숨겨진 상태)입니다. 따라서 div가 이미있는 위치로 이동하려고하기 때문에 애니메이션이 아닙니다. 다시 테스트를 통해 눈치 챘 듯이 div가 있기 때문에 처음에만이 작업이 수행됩니다. 이미 목표 위치로 이동했습니다. 팝업을 열고 닫은 다음 창 크기를 조정하고 팝업을 다시 열면 어떤 종류의 애니메이션이 생길 것입니다. 이는 animate 호출에서 지정한 div의 동적 대상 위치가 변경 되었기 때문입니다 (창 크기가 조정 된 이후).

Answer 2

애니메이션이 발생하지 않는 이유는 div가 이미 최종 대상에 있기 때문입니다. 따라서 대상에 애니메이션을 적용하려고하면 단순히 움직이지 않습니다.

div를 숨기는 대신 원래 위치로 다시 움직이게하거나 숨겨진 후에 다시 원래 위치로 돌아 가게하면 애니메이션의 바운스가 원하는 방식으로 다시 나타납니다. 에.

또한 div가 아닌 애니메이션 전에 div를 표시하려고합니다.

일부 다른 노트 : 일반적으로 HTML 파일에 인라인 코드를 사용하지 않는 것이 가장 좋은 방법으로 간주됩니다

. 대신 ids 나 클래스를 참조하는 외부 파일을 사용하여 이벤트 핸들러를 적용하고자 할 것입니다. 이렇게하면 HTML과 자바 스크립트를 읽고 트래버스하기가 쉬울뿐만 아니라 사실 이후에 더 쉽게 변경할 수 있습니다.

HTML 파일

<script src="externaljsfile.js"></script> 
<div id="popup"></div> 
<input id="showButton" type="button" value="show and animate popup" /> 
<input id="hideButton" type="button" value="hide" /> 

JS 파일

$(document).ready(function() { // runs code once the DOM has loaded 
    var $popup = $('#popup'); 

    $('#showButton').click(function() { 
     $popup.show(); 
     $popup.animate({ 
     top: (($(window).height()/2) - ($popup.outerHeight()/2)) - 70 
     }, 1000, 'easeOutBounce'); 
    }); 

    $('#hideButton').click(function() { 
     // move back to original position here. 
     $popup.hide(); 
    }); 
});