Geek asks and answers

Mouseenter and mouseleave with animation

I am doing simple mouse input and leaving mouse animation. When you enter the div. What opens the link div. When you exit, the div closes. I set the animation using slides and slides.

I have a problem with the animation. There are many .comment divs on the page. When I quickly wind objects. The slide animation is crazy and you see the animation many times. How can i fix this? Thank!

$("#comments .comment .links").hide();
$("#comments .comment").mouseenter(function() {
    $(".links",this).slideDown(300);
}).mouseleave(function() {
    $(".links",this).slideUp(300);
});
+3
source share
3 answers

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

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

Alternatively, you can condense this code with hover():

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

? , ,

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

!

$( "# 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'); 
});

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

0
source

More articles:


All Articles