javascript mouseover gets stuck

Hi,

I've created a mouse over effect with javascript which fades out a top image to show the image underneath.

<style type="text/css" media="screen">
.js #animators { position: relative; height: 100px}
.js #animators div.container { position: absolute; left: 0; top: 0

</style>

<script type="text/javascript">

document.documentElement.className += " js"; // Add js class to the HTML element
$(function(){
var $containers = $("#animators > div").hide();

$('#show').show();

$('tr td a.c').each(function(i,el){
var idx = i;
$(this).click(function(e){
var $target = $containers.filter(':eq(' + idx + ')');
if($containers.filter(':visible').not($target).length){
$containers.filter(':visible').fadeOut();
}
$target.not(':visible').fadeIn();
e.preventDefault();
})
})
});
</script>

<div class="thumbnail" style="margin-top:5%; margin-right:2%;">
<div class="visible-image">
<img src="images/illustrationslabel.jpg" />
</div>
<div class="appearing-image"><img onclick='$("a.illustrations:first").trigger("click");' src="images/illustrations.jpg" />
</div>
</div>


In the code i've got an onclick function triggering fancybox which allows you to view the image clicked on.
The problem is that sometimes the mouse over function gets stuck in its fade out process and doesn't work anymore.

PLZ any help would be so awesome..

mc

Is it JQuery? Or what else Framework? Shall we guess?

You should specify the JavaScript Framework and, in fact, you should have posted this problem in the JavaScript Frameworks Forum. I'll do that for you.

Do you know what a JavaScript Framework is?:rolleyes:

thanks.. nope don't know what a JS framework is...
fancybix was built using the JQuery library though (if thats what you asking) :)

OK, so it's JQuery. It is indispensable to know. JQuery is a JavaScript Framework (Library), but is is not the only one. There are about two dozen of different JavaScript Frameworks: See also:

http://en.wikipedia.org/wiki/JavaScript_framework
http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks

A framework uses custom methods and function (not the native JavaScript ones, well known by every coder), thus when you post a fragment of a frameworks' code without specifying the Framework it is impossible or hard to guess which one could it be. Therefor it is hard to find a solution.

Take a Framework as a dialect of a language. To translate in/from a dialect it is not enough to know the base language. This is the reason for I asked you to tell us which Framework/Library do you use for that code

ok so i've posted this thread on multiple forums, been waiting for a reply for a really long time, only realizing today that i posted the wrong code!! (i'm laughing to keep myself from crying)
so here it is, hopefully this will elicit some responses. so below is the jquery fade in fade out code:


$(document).ready(function(){
$(".appearing-image img").css("opacity",0).fadeTo(500, 0);
$(".appearing-image img").mouseover(function ()

{
if ($(this).is(':animated'))
{
$(this).stop().fadeTo(250,1);
}
else
{
$(this).fadeTo(250, 1);
}


});
$(".appearing-image img").mouseout(function () {
if ($(this).is(':animated'))
{
$(this).stop().fadeTo(250,0);
}
else
{
$(this).fadeTo(250, 0);
}
});



here is the html code:


<div class="thumbnail" style="margin-top:5%; margin-right:2%;">
<div class="visible-image">
<img src="images/illustrationslabel.jpg" />
</div>
<div class="appearing-image"><img onclick='$("a.illustrations:first").trigger("click");' src="images/illustrations.jpg" />
</div>
</div>



the animation gets stuck if you move your mouse over the image, click the image (to open fancybox) and move the cursor off the image quickly before fancybox opens. hope that helps.

Please any response would be awesome.

thanks