how i can make jquery animation like this

Question

i want make clouds like this page

it should dispay in random places in header and move by random method who i can i used settime out function but its not working good please help me

Answer 1

Hire a web developer?

Seriously, I'm all for helping fellow developers, but not for doing their jobs in their place. Get some code over here and then we'll help.

OK, ranting aside:

Use setInterval. (sorry i was wrong assuming delay() could help)

try something like this (example here). Assuming your cloud is a div...

    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);
});

Note that hte markup should contain :

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

The 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

The clouds appear to be draggable within their container. When you mouse over, another element is animated, and the clouds themselves slide side to side in their parent container when you hover the parent.

1. jQuery's draggable plugin.
2. $.hover(); for animated rain.
3. $.animate(); for the sliding.

Show us what you've tried and you'll get a more detailed response.

Answer 3

I don't know how in jQuery, but in simple JS, its an image moving with a Timer. On Firefox and using FireBug you can see the code in the clouds