Question

I am sliding down some content when a user mouse over on it and sliding up on mouse out. My problem is when I move mouse frequently until it’s slideup or slidedown it doesn’t show. Means it’s creating a queue.

$(function(){
    $('div[tooltip="true"]').hover(
        function(e){
            x = e.clientX;
            y = e.clientY;
            newX = x + 10;
            newY = y + 5;
            $('#tool_tip_text_content').css({'left':newX, 'top':newY});
            html_content = '<p>Some Html content</p>';
            $('div#tool_tip_text_content').html(html_content);
            $('#tool_tip_text_content').slideDown(500);
        },
        function(e){
            $('div#tool_tip_text_content').html('');
            $('#tool_tip_text_content').slideUp(0);
        }
    );
});

Answer 1

You should make use of jQuery.stop to stop the current queue in action. Your code should look like:

$(function(){
    $('div[tooltip="true"]').hover(
        function(e){
            x = e.clientX;
            y = e.clientY;
            newX = x + 10;
            newY = y + 5;
            $('#tool_tip_text_content').css({'left':newX, 'top':newY});
            html_content = '<p>Some Html content</p>';
            $('div#tool_tip_text_content').html(html_content);
            $('#tool_tip_text_content').stop(true, true).slideDown(500);
        },
        function(e){
            $('div#tool_tip_text_content').html('');
            $('#tool_tip_text_content').stop(true,true).slideUp(0);
        }
    );
});