Mouseenter and mouseleave with animation

3
votes

I make a simple mouse enter and mouse leave animation. When you mouse enter the div. Than the links div is going open. When you mouse out, the div is going closed. I set a animation with slideUp and slideDown.

I have a problem with the animation. There are a lot of .comment divs on the page. When I hover over the items quickly. The slide animation is going crazy and you see the animation a lot of times. How can i fix that? Thanks!

$("#comments .comment .links").hide();
$("#comments .comment").mouseenter(function() {
    $(".links",this).slideDown(300);
}).mouseleave(function() {
    $(".links",this).slideUp(300);
});
3
javascriptjqueryslidedownslideupmouseenter
Hiya! sharing this jsfiddle.net/hMx9p another version of slide if you down want to use mouse enter and leave, have a nice one, cheerios! - Tats_innit

3 Answers

6
votes

Use stop(true) to clear the animation queue on each event:

$("#comments .comment .links").hide();
$("#comments .comment").mouseenter(function() {
    $(".links",this).stop(true).slideDown(300);
}).mouseleave(function() {
    $(".links",this).stop(true).slideUp(300);
});

Also, you could condense this code by using hover():

$("#comments .comment .links").hide();
$("#comments .comment").hover(
    function() { $(".links", this).stop(true).slideDown(300); },
    function() { $(".links", this).stop(true).slideUp(300); }
);
2
votes

what behaviour do you what it to do? maybe you could stop it animating all others before starting the animations

$("#comments .comment").mouseenter(function() {
    $("#comments .comment").stop();
    $(".links",this).slideDown(300);
}).mouseleave(function() {
    $(".links",this).slideUp(300);
});
0
votes

Same problem here !

$("#spezial_navi_btn_20").mouseenter(function() {

    $("#content").stop(true).fadeOut("slow");
    $("#spezial_navi").css('background-image', 'url(http://#)');
    $("#spezial_navi_20").stop(true, true).slideUp("fast");
    $("#spezial_navi_desc_20").stop(true, true).slideDown('slow', function() {
        $("body").ezBgResize({
        img : "http://#",
        opacity : 1,
        center  : true 
        });
    });
    $("#spezial_navi_desc_30").stop(true, true).slideUp('slow');
    $("#spezial_navi_30").stop(true, true).slideDown('slow'); 
    $("#spezial_navi_desc_40").stop(true, true).slideUp('slow');
    $("#spezial_navi_40").stop(true, true).slideDown('slow'); 
});

SOLVED !! Instead of : $("#spezial_navi_20").stop(true, true).slideUp("fast"); and: $("#spezial_navi_desc_20").stop(true, true).slideDown('slow', function() { I did: $("#spezial_navi_20").slideUp("fast"); and: $("#spezial_navi_desc_20").slideDown('slow', function() {