2014-04-22 4 views
1

페이지가로드 될 때 왼쪽에서 div 슬라이딩을 움직이게하는 함수를 만들어야합니다. 약 5 초 동안 애니메이션을 지연시켜야합니다. 이 예는 주 수있는 부분이 바로 제목 아래 링크페이지로드시 div div

http://www.exacttarget.com/blog/amazon-dash-the-skinny-on-this-stick/

에서 볼 수 있습니다. 모든 숫자를 요약 한 항목을 밀어 넣을 함수를 만들어야합니다. 이것은 회색 배경의 오른쪽에있는 것입니다.

+2

'$ (문서) .ready()','에서는 setTimeout()', 및'animate()'. – isherwood

답변

0
$(document).ready(function() { 
     $("#slideBox").delay(5000).show("slide", { direction: "right" }, 1200); 
}); 
4

이봐 난 CSS의 전문가가 아니라고하지만 사이트 사람들이 일을하는 것은 내가이 jsfiddle .This는 .I이가 그래서 모든 브라우저에서 작동합니다 확실하지 오전 당신을 도움이 될 만든 well.So으로 CSS에서 비트입니다 CSS3 전환을 지원하지 않는 브라우저를위한 후퇴로 far.You가 jQuery를 사용할 수 내가 사용하는 코드는 다음과 같습니다

div 
{ 
    width:100px; 
    height:100px; 
    background:red; 
    transition-property: margin-left; 
    transition-duration: 2s; 
    -webkit-transition-property: margin-left; /* Safari */ 
    -webkit-transition-duration: 2s; /* Safari */ 
    margin-left:-100px; 
} 
div.active 
{ 
    margin-left:0px; 
} 

JQuery와 코드는 다음과 같습니다

$(function(){ 

$(".mydiv").addClass("active"); 
console.log($(".mydiv")); 

}); 

,626,

0

HTML

<div id="upper_div"></div> 
<div id="slideBox"></div> 

CSS

#upper_div{ 
    width:200px; 
    height:50px; 
    background-color:#E5E5E5; 
    float:left; 
} 

#slideBox{ 
    width:50px; 
    height:50px; 
    background-color:#CCCCCC; 
    float:left; 
    display:none; 
} 

jQuery를

$(document).ready(function() { 
     $("#slideBox").delay(5000).show("slide", { direction: "right" }, 1200); 
}); 

DEMO

+0

div '# slideBox'가 오른쪽으로 미끄러지지 않습니다. 5 초 후에 나타납니다. –