-
Jquery Animation
over 10 years ago
Jquery animate() method is used to animate any element in the web page. It allow us to create custom animations.
The syntax for this:
$(selector).animate({params},speed,callback);
The parameters of animate() mehod are:The params parameter defines the properties of CSS to be animated. The speed parameter is the duration of effect. It can be "slow" ,"fast" or "milliseconds". The callback parameter defines the function that is to be executed after the animation completes
.
Note: By default all html elements have a static position. So we must set the CSS position property of the element to fixed, absolute or relative.
The following example demonstrates the use of animate() method on images:
HTML:
<div class="pic2"><img src="images/2.jpg" alt="" ></div> <div class="pic3"><img src="images/3.jpg" alt="" ></div> <div class="pic4"><img src="images/4.jpg" alt="" ></div> <div class="pic5"><img src="images/5.jpg" alt="" ></div> <div class="pic6"><img src="images/6.jpg" alt="" ></div> <div class="pic7"><img src="images/7.jpg" alt="" ></div> <div class="pic8"><img src="images/8.jpg" alt="" ></div> <div class="pic9"><img src="images/1.jpg" alt="" ></div> <div class="pic10"><img src="images/2.jpg" alt=""></div> <div class="pic11"><img src="images/3.jpg" alt=""></div> <div class="pic12"><img src="images/4.jpg" alt=""></div> <div class="pic13"><img src="images/5.jpg" alt=""></div> <div class="pic14"><img src="images/6.jpg" alt=""></div> <div class="pic15"><img src="images/7.jpg" alt=""></div> <div class="pic16"><img src="images/8.jpg" alt=""></div> </div> <input type="button" value="Click here" class="click" /> </div>CSS:
<style> body{ width:100%; } .Carousel{ width:900px; height: 900px; margin: 200px auto; } .pictures{ border: 7px solid #EEEEEE; height: 293px; margin: 7px auto; width: 321px; position: relative; } img{ width:80px; height:70px; } .pictures div{ float:left; width:80px; height:70px; } input{ margin: 26px 196px; } .pic1 img{ position: absolute; } .pic3 img{ position: absolute; } .pic5 img{ position: absolute; } .pic7 img{ position: absolute; } .pic9 img{ position: absolute; } .pic11 img{ position: absolute; } </style>Jquery:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script><script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> <script> $(document).ready(function(){ $(" input").click(function() { $(".pic1 img").animate({bottom:'155px',left: '80px'}); $(".pic3 img").animate({right:'159px','top':'69px'}); $(".pic5 img").animate({top:'69px',left:'81px'}); $(".pic7 img").animate({bottom:'153px',right:'160px'}); $(".pic9 img").animate({bottom:'153px',right:'160px'}); $(".pic11 img").animate({bottom:'153px',right:'160px'}); }); }); </script>Note:You can see the demo of this example from the given file.
0 Comment(s)