JS/jQuery: Reverse-Animation ausgelöst durch Hover?

Ich war begeistert, als ich zum ersten Mal auf die .animate-Funktion von jQuery stieß. Aber wenn ich z.B. ändere die Farbe einer Box mit dieser Funktion auf .mouseover, es wird (natürlich) die Animation vervollständigen, obwohl die Maus die Box bereits verlassen hat und eine weitere Animation, die die Farbe umkehrt, wurde auf .mouseleave aufgerufen.JS/jQuery: Reverse-Animation ausgelöst durch Hover?

Dies führt z.B. zu flattern, wenn Sie mehrmals mit der Maus über die Box fahren und die Animation 20 Mal oder so wiederholt wird.

Um eine Animation zu stoppen/um die Farbänderung umzukehren, wenn sich die Maus nicht mehr auf der Box befindet, können Sie z. diese Kombination von Funktionen dieser Frage, die bereits gefragt: jQuery - Animation transition interrupted by hover

Hier ist der Beispielcode für diese Frage für eine ähnliche Animation: http://jsfiddle.net/B9wx8/30/

$('.box1,.box2').mouseenter(function() { 
    $('.box2').stop().animate({ 
     top: 0 
    }, 'slow'); 
}).mouseleave(function() { 
    $('.box2').stop().animate({ 
     top: '-200px' 
    }, 'slow'); 
});

Das scheint nicht sehr elegant und kompliziert. Gibt es eine jQuery-Funktion, die fast wie .animate ist, aber die Animation nach z. Die Maus ist nicht mehr in der Box?

Etwas wie:

$('.myClass').animate_and_reverse_animation_if_hover_ends({...} , 500);

Quelle

2017-05-09 Fabian Schn.

Well keine (_as weit ich bin aware_), da es eine ziemlich spezifische Animation ist. Sie können immer Ihre eigenen Plugins für jQuery schreiben, so dass Sie '$ ('. MyClass') aufrufen können. Animate_and_reverse_animation_if_hover_ends ({...}, 500);' und lassen Sie es tun, was Sie wollen. – George

Btw., Das ist ein Problem, das Sie nicht mit CSS-Animationen oder Übergängen an erster Stelle haben ... – CBroe

Below Code CSS

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Untitled Document</title> 
<style type="text/css"> 
.bottom, .top { 
    width: 200px; 
    height: 200px; 
} 
.bottom { background-color: black; } 
.top { 
    background-color: red; 
    transform: translate(0, 0%); 
    transition: transform .3s ease; 
    will-change: transform; 
} 
.top.covered { transform: translate(0, 100%); } 
</style> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
    $(document).on('mouseover', '.bottom', function(){ 
     $(".top").addClass("covered"); 
    }); 
    $(document).on('mouseout', '.top', function(){ 
     $(".top").removeClass("covered"); 
    }); 
}); 
</script> 
</head> 
<body> 
<div id="container"> 
    <div class="top"></div> 
    <div class="bottom"></div> 
</div> 
</body> 
</html>

und die Geige: https://jsfiddle.net/beekvang/mpecfc1n/

Quelle

2017-05-09 11:44:46 Gerard

danke für diese gute Antwort. Kannst du dem CSS in Kürze gefallen? Ich verstehe nicht ganz, was du dort mit transform und transition gemacht hast? –

Ich spielte eine, aber mit Ihrem Code, jetzt verstehe ich es, diese Möglichkeit ist super! Ich werde ein bisschen mehr darüber lesen! –

so würden Sie einen Anruf wie diese

$('.box1,.box2').animate_and_reverse_animation_if_hover_ends({top: 0}, {top: "-200px"}, 'slow');

wo niemand

bevorzugen (außer Sie) hat eine Ahnung, was los ist - über diese:

$('.box1,.box2').mouseenter(function() { 
    $('.box2').stop().animate({ 
     top: 0 
    }, 'slow'); 
}).mouseleave(function() { 
    $('.box2').stop().animate({ 
     top: '-200px' 
    }, 'slow'); 
});

Zweite Version ist IMHO so elegant, einfach und lesbar wie es wird ... in jQuery-world.

Ich schlage vor, Sie einfach damit fortfahren, und verwenden Sie die Lösung, die Sie bereits in Ihrer Frage geliefert. Aber wenn Sie müssen, könnten Sie Ihr eigenes jQuery.animate_and_reverse_animation_if_hover_ends() Plugin schreiben, das das zweite snipped kapselt.

UPDATE:

Wie CBroe weist in seinem Kommentar aus. Eine echte Verbesserung der Eleganz könnte darin bestehen, diese Animation/Transition in CSS zu machen.

Quelle

2017-05-09 10:13:08 klemens

Danke, wie würde ich es mit "Animation/Übergang in CSS" tun. Bis jetzt ist mir nur bewusst, dass ich Dinge wie .div: hover {...} benutze, um Dinge innerhalb von CSS zu animieren. –

JS/jQuery: Reverse-Animation ausgelöst durch Hover?

Antwort

Verwandte Themen