how to create the queue effects using .animate function jquery
hey frnds, i m jquery beginner.
i m trying to develop a tabed content slider. during this i am facing two problems.
first i don't know how to create the queue effects mean, i want to animate first div, after
completion of first animation than second animation would be started.
for this i using the callback function here, but i want to know is there any other procedure
to do this thing.
second there is jerk in the animation at second and fourth tab.
ur response would be appriciable. i m sending the whole code here.
Thanks and Regards
Inderjeet Singh.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery UI Tabs Demo</title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
body
{
font-size: 75%;
color: #222;
background: #ffffff;
font-family: "Helvetica Neue" , Helvetica, Arial, sans-serif;
line-height: 1.6em;
}
.widget
{
width: 310px;
margin: 20px;
padding: 10px;
background: #f3f1eb;
border: 1px solid #dedbd1;
margin-bottom: 15px;
}
.widget a
{
color: #222;
text-decoration: none;
}
.widget a:hover
{
color: #009;
text-decoration: underline;
}
.tabnav li
{
display: inline;
list-style: none;
padding-right: 5px;
}
.tabnav li a
{
text-decoration: none;
text-transform: uppercase;
color: #222;
font-weight: bold;
padding: 4px 6px;
outline: none;
}
.tabnav li a:hover, .tabnav li a:active, .tabnav li.ui-tabs-selected a
{
background: #dedbd1;
color: #222;
text-decoration: none;
}
.tabdiv
{
margin-top: 2px;
background: #fff;
border: 1px solid #dedbd1;
padding: 5px;
}
.tabdiv li
{
list-style-image: url("star.png");
margin-left: 20px;
}
.tabdiv p
{
font-size: 12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: justify;
color: #8b959c;
display: block;
}
.ui-tabs-hide
{
display: none;
}
#featuredvid
{
text-align: center;
}
.fvid
{
margin-bottom: 5px;
}
.vidselector li
{
text-align: left;
list-style: none;
padding: 5px;
background: #ffffff;
border: 1px solid #dedbd1;
text-transform: uppercase;
margin-bottom: 5px;
}
</style>
<script src="http://code.jquery.com/jquery-1.5.1.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
var AnimatedDiv = '#tab1';
var Control = '';
$(function() {
$('.tabnav li:eq(1)').addClass('ui-tabs-nav');
// Hide all the Content except First Region Start
var loopCounter = 1;
$('.tabnav > li').each(function() {
loopCounter += 1;
$('#tab' + loopCounter).css('display', 'none');
});
// Hide all the Content Region End
$('.tabnav li a').click(
function() {
$(".ui-tabs-selected").removeClass("ui-tabs-selected");
$(this).parent().addClass("ui-tabs-selected");
Control = this;
$(AnimatedDiv).animate({ opacity: 0, height: 'toggle' }, 'slow', inder);
});
});
function inder() {
var content_show = $(Control).attr("href");
$(content_show).animate({ opacity: 1, height: 'toggle' }, 'slow');
AnimatedDiv = content_show;
}
</script>
</head>
<body>
<div id="tabvanilla" class="widget">
<ul class="tabnav">
<li class="ui-tabs-selected"><a href="#tab1">Popular</a></li>
<li><a href="#tab2">Recent</a></li>
<li><a href="#tab3">Featured</a></li>
<li><a href="#tab4">dummy</a></li>
</ul>
<div id="tab1" class="tabdiv">
<ul>
<li><a href="#">Popular Welsh Zombie Sheep Invasion</a></li>
<li><a href="#">Sheep Rising From The Dead</a></li>
<li><a href="#">Blogosphere Daily Released!</a></li>
<li><a href="#">Aliens Infiltrate Army Base In UK Town</a></li>
<li><a href="#">U2 Rocks New York's Central Park</a></li>
<li><a href="#">TA Soldiers Wear Uniforms To Work</a></li>
<li><a href="#">13 People Rescued From Flat Fire</a></li>
<li><a href="#">US Troops Abandon Afghan Outpost</a></li>
<li><a href="#">Are We Alone? A Look Into Space</a></li>
<li><a href="#">Apple iPhone 3G Released</a></li>
</ul>
</div>
<!--/popular-->
<div id="tab2" class="tabdiv">
<p>Recent<br />
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
Ipsum has been the industry's standard dummy text ever since the 1500s, when an
unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s with the release
of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum. Why
do we use it? It is a
</p>
</div>
<!--/recent-->
<div id="tab3" class="tabdiv">
<ul>
<li><a href="#">Featured Aliens Infiltrate Army Base In UK Town</a></li>
<li><a href="#">Are We Alone? A Look Into Space</a></li>
<li><a href="#">U2 Rocks New York's Central Park</a></li>
<li><a href="#">TA Soldiers Wear Uniforms To Work</a></li>
<li><a href="#">13 People Rescued From Flat Fire</a></li>
<li><a href="#">US Troops Abandon Afghan Outpost</a></li>
<li><a href="#">Sheep Rising From The Dead</a></li>
<li><a href="#">Blogosphere Daily Released!</a></li>
<li><a href="#">Apple iPhone 3G Released</a></li>
<li><a href="#">Welsh Zombie Sheep Invasion</a></li>
</ul>
</div>
<div id="tab4" class="tabdiv">
<p>dummy<br />
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
Ipsum has been the industry's standard dummy text ever since the 1500s, when an
unknown printer took a galley of typ
</p>
</div>
<!--featured-->
</div>
<!--/widget-->
<p>
By <a href="http://www.danharper.me" title="Web Design Portfolio of Dan Harper">Dan
Harper</a> using jQuery UI Tabs for <a href="http://www.nettuts.com" title="NETUTS - SPOONFED WEB SKILLS">
NETTUTS.com</a></p>
</body>
</html>