Stoppen jquery Prozess

Question

Ich habe einen div aus Seite versteckt und ein Teil ist sichtbar wie:

div{ 
    left: -100px; 
    width: 150px; 
    height: 50px; 
} 

ich jquery ganzen div zeigen verwendet:

$("div").hover(function(){ 
    $("div").animate({left: '0px'}); 
},function(){ 
    $("div").animate({left: '-100px'}); 
}); 

Wenn ich hover über die div und schnell unhover drüber hinweg, es scheint die Animation die gleiche Anzahl von Malen zu spielen, die ich das tue. Wie kann ich verhindern, dass die Animation mitten in der Animation aufhört, wenn ich nicht mehr über das div schwebe, und wie kann ich die Animation erst starten, nachdem ich eine bestimmte Zeit über die Animation gestanden habe?

Answer 1

Sie können die vorherige Animation mit .stop() stoppen.

$("div").hover(function() { 
 
    $("div").stop().animate({ 
 
    left: '0px' 
 
    }, "slow"); 
 
}, function() { 
 
    $("div").stop().animate({ 
 
    left: '-100px' 
 
    }); 
 
}, "slow");

div { 
 
    left: -100px; 
 
    width: 150px; 
 
    height: 50px; 
 
    background-color: blue; 
 
    position: absolute; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div></div>

Wenn Sie es möchten, warten Sie, bis Sie ein wenig schwebt habe, bevor die Animation beginnt, können Sie setTimeout verwenden, und Sie können das Timeout in der unhover Funktion abzubrechen.

var hoverTimer; 
 
$("div").hover(function() { 
 
    hoverTimer = setTimeout(function() { 
 
    $("div").stop().animate({ 
 
     left: '0px' 
 
    }, "slow"); 
 
    }, 1000); 
 
}, function() { 
 
    clearTimeout(hoverTimer); 
 
    $("div").stop().animate({ 
 
    left: '-100px' 
 
    }); 
 
}, "slow");

div { 
 
    left: -100px; 
 
    width: 150px; 
 
    height: 50px; 
 
    background-color: blue; 
 
    position: absolute; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div></div>