IMAGE SLIDER -SOURCE (1360)

Queues in jQuery are a useful way to add a list functions to an element that should be executed in a particular order. The real benefit is that queues give you full control of when each item in the queue is invoked using this method. jQuery provides a nice API for inspecting and manipulating queues.
<html> <head> <script src=" https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"> </script> <script type="text/javascript"> $(function() { $('ul.menu li').hover(function(){ $(this).find('img').animate({top:'190px'},{queue:false,duration:800}); }, function(){ $(this).find('img').animate({top:'0px'},{queue:false,duration:800}); }); }); </script> <style media="screen"> ul.menu { display: block; overflow: hidden; } ul.menu li { list-style:none; float:left; padding: 0px; width:187px; position: relative; background:#eaf9fe; margin-right: 0px; } ul.menu li a { display: block; position: relative; overflow: hidden; width: 187px; height: 190px; padding: 0px; color: red; font-weight: bold; text-align: center; font: 1.6em/1.3 Helvetica, Arial, sans-serif; text-decoration: none; } ul.menu li img { position: absolute; top: 0; left: 0; border: 0; } </style> </head> <body> <ul class="menu"> <li><a href=" "><img src=" "/> NMAE </a></li> <li><a href=" "><img src=" "/> NMAE </a></li> <li><a href=" "><img src=" "/> NMAE </a></li> <li><a href=" "><img src=" "/> NMAE </a></li> </ul> </body> </html>

IMAGE-1 IMAGE-2 IMAGE-3 IMAGE-4 IMAGE-5 IMAGE-6
IMAGE-7 IMAGE-8 IMAGE-9 IMAGE-10 IMAGE-11 IMAGE-12

Please check the DEMO

No comments:

Click Here To add Comment

Post a Comment