jQuery 애니메이션을 어떻게 만들 수 있습니까?

Question

나는 그것을 무작위 방법 내가 할 수있는 에 의해 헤더와 이동의 임의의 장소에 표시해야이 page

처럼 구름을합니다.

이 같은 (example here를) 시도 (도움이 될 수 미안 해요 지연 (가정 잘못)) 나는에서는 setTimeout 기능을 사용하지만, 좋은

Answer 1

사용하여 setInterval을 작동하지 않습니다. HTE 마크 업에 포함해야한다는

function moveMe(){ 
    var $this = $('#cloud'); 
    $this.each(function(){ 
      var ranX=Math.floor(Math.random()*11); 
      var startX = $this.offset().left; 
      var maxX = $this.parent().width(); 
      var newX = startX+ranX; 

      //newX = (newX>maxX)? 0: newX; 
      //alert("newX="+newX); 
      $this.animate({ 
       left: newX+'px' 

      }, "slow"); 
    }); 
} 
$(function(){ 



    setInterval('moveMe()',1000); 
}); 

참고 : 클라우드 가정하면 사업부입니다

<div id="sky"> 
<div class="cloud" id="cloud"></div> 
</div> 

CSS의 : 구름들이 컨테이너 내에서 드래그 할 것으로 보인다

#sky{ 
width:990px; 
height:300px; 
background:blue; 
position:relative; /* important */ 
} 

.cloud{ 
position:absolute; /* important */ 
top:40px; 
left: 0; 
width:100px; 
height:80px; 
background: transparent url(images/cloud.png) top left no-repeat; 
} 

Answer 2

. 마우스를 올리면 다른 요소가 애니메이션으로 표시되고 구름을 부모 컨테이너로 가져 가면 구름 컨테이너가 부모 컨테이너에서 나란히 슬라이드됩니다.

1. jQuery's draggable plugin.
2. $.hover(); 비가 내립니다.
3. $.animate(); 슬라이드 용.

우리가 시도한 것을 보여 주면보다 자세한 답변을 얻을 수 있습니다.

Answer 3

저는 jQuery가 어떻게되는지 모르지만 간단한 JS에서는 Timer로 이미지가 움직입니다. Firefox에서 FireBug를 사용하면 구름에 코드가 표시됩니다.