[jQuery] Strange animate behaviour
I get this strange jumpy animate behaviour in IE7
And in FF, chrome the animation flickers after completion.
http://87.253.136.51/~gosi/nl
(click trough the slides)
HTML
<div class="widget_portfolio">
<ul>
<li class="active">
<div class="title">Duo Vertaalburo</div>
<div class="indicator">
<a href="#">01</a>
</div>
<div class="handle">
<a href="#"></a>
</div>
<div class="content">
<a href="nl/zie/portfolio/2-duo-vertaalburo.html"
title="Duo Vertaalburo">
<img src="files/module_portfolio/image_00002.jpg"
alt="Duo Vertaalburo" />
</a>
</div>
</li>
<li>
<div class="title">I Love Vintage</div>
<div class="indicator">
<a href="#">02</a>
</div>
<div class="handle">
<a href="#"></a>
</div>
<div class="content">
<a href="nl/zie/portfolio/3-i-love-vintage.html"
title="I Love Vintage">
<img src="files/module_portfolio/image_00003.jpg"
alt="I Love Vintage" />
</a>
</div>
</li>
<li>
<div class="title">Urpop</div>
<div class="indicator">
<a href="#">03</a>
</div>
<div class="handle">
<a href="#"></a>
</div>
<div class="content">
<a href="nl/zie/portfolio/1-urpop.html"
title="Urpop">
<img src="files/module_portfolio/image_00001.jpg"
alt="Urpop" />
</a>
</div>
</li>
<li>
<div class="title">Xstrel</div>
<div class="indicator">
<a href="#">04</a>
</div>
<div class="handle">
<a href="#"></a>
</div>
<div class="content">
<a href="nl/zie/portfolio/9-xstrel.html"
title="Xstrel">
<img src="files/module_portfolio/image_00009.jpg"
alt="Xstrel" />
</a>
</div>
</li>
</ul>
</div>
CSS:
.widget_portfolio { width: 100%; height: 330px; padding: 12px 0px
0px 0px; margin: 0px 74px; overflow: hidden; clear: both; }
.widget_portfolio ul { margin: 0px; padding: 0px; list-style:
none; }
.widget_portfolio ul li { display: inline; margin: 0px; padding:
0px 1px; float: left; }
.widget_portfolio ul li.active .content { display: block; }
.widget_portfolio ul li.active .title { display: block; }
.widget_portfolio ul li .indicator a { color: #000000; font-size:
9px; display: block; width: 12px; text-align: center; }
.widget_portfolio ul li .handle { display: block; float: left;
width: 12px; height: 292px; }
.widget_portfolio ul li .handle a { display: block; width: 100%;
height: 100%; background: #b5b3b3; }
.widget_portfolio ul li .handle a:hover { background: #eb0d8c; }
.widget_portfolio ul li .content { display: none; float: left; }
.widget_portfolio ul li .title { display: none; position: absolute;
margin: 310px 0px 0px 30px; }
JQUERY:
$(".widget_portfolio .handle, .widget_portfolio .indicator").click
(function(){
var slide = $(this).closest("li");
var active = $(this).closest(".widget_portfolio").find(".active");
if (!$(slide).hasClass("active")) {
var contentactive = $(active).find(".content");
var contentslide = $(slide).find(".content");
$(active).find(".content").stop(true,true).animate({width: "hide",
opacity: "0"},"slow","",function(){
$(active).find(".title").hide();
$(active).removeClass("active");
});
$(slide).find(".content").stop(true,true).animate({width: "show",
opacity: "1"},"slow","",function(){
$(slide).find(".title").slideDown();
$(slide).addClass("active");
});
}
return false;
});
Does anybody know what the problem is and point me in the right
direction?