Transformer
New Member
What I'm trying to do is to fade in a div by rolling over a link. Once your mouse is over the link, you're able to mouse around the div that just faded in and you can click links inside the div.Currently I have four links and each have a div with links and images in. On hover of the link the div fades in below the link then you can move your mouse over the div and use the images + links within. On roll out of the link or the div, it should fade out. Also, if you move your mouse to another main navigation link it should fade out the previous and fade in the new div.The problem seems to be that the previous DIV will sometimes not fade out if you rapidly move to next link. I'm drawing a blank, any ideas?Problem solved, answer is here: http://jsfiddle.net/UkneJ/3/This is what I'm working with: http://jsfiddle.net/DemhU/17/\[code\]$('#div1, #div2, #div3, #div4').hide();var is_over;var hide_dropnav = function(a) { setTimeout(function() { if (is_over) { return; } else { var a_name = $(a).attr('data-name'); $('#' + a_name).fadeTo(250, 0); $('#nav li a').removeClass('active'); } }, 10);}$('#nav li a').hover(function() { var elem_name = $(this).attr('data-name'); $('#' + elem_name).stop(true,true).fadeTo(150, 1); is_over = true; $('#nav li a').removeClass('active'); $(this).addClass('active'); var that = this; hide_dropnav(that);}, function(){ is_over = false; hide_dropnav(this);});$('#div1, #div2, #div3, #div4').hover(function() { is_over = true;}, function() { is_over = false;});\[/code\]