오른쪽 창에서 슬라이드 DIV

Question

페이지의 오른쪽에서 슬라이드 아웃하고 창 오른쪽에 잠겨 ​​있어야하는 div가 있습니다. 이 약 5 초 동안 지연 후

<script type="text/javascript"> 
    $("#slide").animate({width: 'toggle'}, 500); 
</script> 

HTML

<div id="slide"><img src="live.jpg"></div> 

내가 무엇을 놓치고 밖으로 밀어 수 있다면 그것은 좋은 것?

Answer 1

몇 가지 옵션을 시도해 볼 수 있습니다.

.animate()를 사용하려면 초기 상태에서 위치를 변경해야합니다. 당신의 CSS에 그래서, 당신은으로 지정한 속성에 애니메이션 것) .animate를 (추가,이 세트로

#slide { 
    position: absolute; 
    right: 999em; 
} 

같은 페이지 떨어져 무언가에 사업부의 초기 상태를 설정할 수 있습니다 지정한 값이므로 애니메이션이 완료된 후에 div가 끝내는 위치를 지정하십시오.

$("#slide").delay(5000).animate({right: 0}, 500); 

또 다른 방법은 jQuery addClass() 메소드를 사용하는 것입니다. 이렇게하면 스타일 시트에 두 개의 클래스를 정의해야합니다. 첫 번째 클래스는 div의 초기 상태이며 다시 화면에 배치됩니다. 두 번째 클래스는 div가 끝나는 곳이 될 것입니다. 그것은 5 후 발사 가지고 당신은이에의 setTimeout을 사용할 수 있습니다 수행이 당신의 jQuery를에 그런

.div-start { 
    position: absolute; 
    right: 999em; 
    transition: right 4s ease-in; 
    -webkit-transition: right 4s ease-in; 
    -moz-transition: right 4s ease-in; 
} 

.div-animate { 
    right: 0; 
} 

:

$('yourDiv').addClass("div-animate"); 

편집 애니메이션의 경우, 그냥이 같은 CSS 애니메이션을 사용하여 초, 이렇게 : setTimeout (function() { $ ('yourDiv'). addClass ("div-animate"); }, 5000);

Answer 2

$(document).ready(function(){ 
    $('#slide').delay(5000).animate({"width":"20%"}, 0500); 
}); 

이렇게하면 페이지가 완전히로드 된 후 애니메이션이 5 초 지연되고 콘텐츠가 너비 20 %로 슬라이드됩니다. 여기 http://jsfiddle.net/EdjjH/

Answer 3

$(document).ready(function(){ 
    $("#slide").delay(5000); 
    $("#slide").animate({ 
     width: '500px', 
     height: '500px', 
    }); 
}); 

바이올린은 : 예를 들면 : 바라 볼 때 jsfiddle 이 바이올린이 5 초 정도로 지연 될 환자를 갖는다.