CODEWITHSUNDEEP
jqueryjquery-animate
Mike Rondina
Mike Rondina

Reputation: 43

Animate images with jQUery

I'm tring to learn how to do the effects, that this guy is using in his website.

I want to move image from left to right and vice versa.

How can I do it?

http://www.adhamdannaway.com/about

Upvotes: 0

Views: 9552

Answers (3)

Kaushal Sachan
Kaushal Sachan

Reputation: 1243

100% animating code (this code will work to animate all image or div having class animation indivisually)

<script language="javascript" type="text/javascript">
$(document).ready(function(){

$(".animation").mouseover(function(){
   $(this).animate({
                      height:'200px',
                      width:'200px',
                      left : '-11px'
                    })
                            });

$(".animation").mouseout(function(){
   $(this).animate({
                      height:'178px',
                      width:'178px',
                      left : '0px'
                    })
                            });

});
</script>

Upvotes: 0

Praveenram Balachandar
Praveenram Balachandar

Reputation: 1585

Assuming your HTML with the image tags are like this:

<img class="left-right" src="img-url.com"/>
<img class="right-left" src="img-url.com"/>

Your css for this would be like initially:

.left-right {
   position: absolute;
   left: -100px;
}

.right-left {
   position: absolute;
   right: -100px;
}

Just to make sure its not in the viewport we position it outside the boundaries of the frame.

Then using the jQuery animation we need to add an event:

$(".left-right").focus(function () {
    $(this).animate({left: "0px"}, 1000);
}); 


$(".right-left").focus(function () {
    $(this).animate({right: "0px"}, 1000);
});

Here the 1000 is 1000ms over which the element will animate from its -100px to 0px.

Upvotes: 0

Alex
Alex

Reputation: 1593

Read about jQuery animate function: http://api.jquery.com/animate/

Upvotes: 0

Related Questions