I want to display my chart when the mouse is hover some element. Everything works fine except I can't stop the slideToggle returns its original position.
Once the mouse is "out-of-target" it contracts, but if the mouse still at the chart it should stay appearing.
$(document).ready(function () { $("#test").hover(function () { $("#chart_div").slideToggle('slow'); }); }); I made a jsFiddle for this question instead of pasting here the whole bunch of code.
EDIT
Here is a goal example.
You can do it by defining both mouseenter and mouseleave events like this sample:
$(document).ready(function() { $("#test").mouseenter(function() { $("#chart_div").show('slow'); }); $(".outerClass").mouseleave(function() { if(!$('#chart_div').is(':hover')) { $("#chart_div").hide('slow'); } }); }); Where your html structure should resemble this sample:
<div class="outerClass"> <div id="test"><strong>TEST.</strong></div> <div id="chart_div"></div> </div> <div id="another_div">here is out of the pie div</div> 
The best solution would be to change this to a .click()
but if you need the chart to display when you move your mouseover TEST and hide when you move your mouse back over test then you .mouseenter()
$(document).ready(function() { $("#test").mouseenter(function() { $("#chart_div").slideToggle('slow'); }); }); 