jQuery kwicks plug-in for creation of animating image title

Home Tutorial Jquery jQuery kwicks plug-in for creation of animating image title

jQuery kwicks plug-in for creation of animating image title
Posted on: August 14, 2010 at 12:00 AM

In this section ,you will learn about using jQuery kwicks plug-in for creating animating Title images.

jQuery kwicks plug-in for creation of animating image title

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 :

Download Source Code

Click here to see demo

Related Tags for jQuery kwicks plug-in for creation of animating image title:

«Previous Index Next»

Ask Questions?

If you are facing any programming issue, such as compilation errors or not able to find the code you are looking for.

Ask your questions, our development team will try to give answers to your questions.

Tutorial Topics