In this section ,you will learn about using jQuery kwicks plug-in for creating animating Title images.
In this section ,you will learn about using jQuery kwicks plug-in for creating animating Title images.In this section ,you will learn about using jQuery kwicks plug-in for creating animating Title images. The html page contains the four parts of the Image titles which will animate when mouse is hovered on any of the four parts of the image title.
kwicksSlidingBox.html
<html> <head> <title>Kwicks Examples</title> <link rel="stylesheet" type="text/css" href="kwicksSlidingBox/kwicks.css" /> <script src="jquery-1.4.2.js" type="text/javascript"></script> <script src="kwicksSlidingBox/jquery.easing.1.3.js" type="text/javascript"> </script> <script src="kwicksSlidingBox/jquery.kwicks-1.5.1.pack.js" type="text/javascript"> </script> <script type="text/javascript"> $().ready(function() { $('#example1 .kwicks').kwicks({ max: 200, spacing: 5 }); }); </script> </head> <body> <h1>kwicks sliding Image Title </h1> <div id="example1"> <ul class="kwicks"> <li id="kwick1"></li> <li id="kwick2"></li> <li id="kwick3"></li> <li id="kwick4"></li> </ul> </div> </body> </html> |
OUTPUT
Initial state :
When you hover on any part :