Hello & welcome to my blog.

Finally possible! Debugging with Internet Explorers 1(!) to 8, co-exists. Including IE Developer Toolbar!

http://finalbuilds.edskes.net/iecollection.htm

Lately I run into a annoying jQuery problem. The solution to prevent animation queue buildup is maybe known and documented here. However this dosen’t seems to work if you use two animation functions, where one function is triggering the next on callback. In my case it was a menu box with a titlebar and a body area. On hover the title bar fades in (function1:  show(300) ), then the bodyarea rolls down (function2 on callback from function1: rollDown(300) ).  Now if you hover over and out quickly, it seems that jQuery “remembers” the last stat of the animation. So in the whorst case, the body area is 1px in height and stays in that size. The workaround after five hours of trial and error with different combinations of stop(tru, false) – stop (false, true) was to use not the premade functions like show(), rollDown() etc.  It seems that the stop() function is working different on the animate() function.  So I used this and manual created the needed animations.

Download the full example with everything here

Checkout the finished js code:

Used jQuery Version: 1.3.2

<script type="text/javascript">

$(document).ready(function() {

//slide in&out
$(".infobox_wrapper img")
.hover(function() {
$(this).nextAll().stop(); //stop running animations befor new animation

$(this).nextAll("h2").animate({ opacity: "1" }, 300, function() {
$(this).nextAll(".infobox_text").animate({ height: "220", opacity: "1"  }, 300);
});

}, function() {
$(this).nextAll().stop(); //stop running animations befor new animation

$(this).nextAll(".infobox_text").animate({ height: "0", opacity: "0" }, 300, function() {
$(this).prevAll("h2").animate({ opacity: "0" }, 300);
});
});
});
</script>