Share the bug about animate slide fade and other animations in jQuery which are triggered continuously and executed repeatedly with delay
- 2020-11-25 07:08:00
- OfStack
My writing style is that I like to start with the background of the problem:
Because recently I was going to do an action option to call out, and then I came up with a way to hide it by default and show it when I mouse over it.
Started going to add a class = "active", directly trigger mouseover add (or mouseenter), mouseout remove (or mouseleave), the solution is very simple, also very practical, but may not be so cool experience (well, the word to use, instant feeling good low), so I thought of using animate or slide these jQuery animation, then 1 began to speak true, the plugin to write their own, will encounter some problems, It is not very easy to implement (js is not good enough after all), then listen to colleagues to find jquery, import and direct reference is ok.
(ok I didn't get into 1 to do some special effects, the first reaction is to find the plug-in, talking about this, and about the thought of a few days ago met table header from rolling over on interface of fixed that solution, pass a few days, tell truth, that method online 1 circle didn't find the right solution, finally I want to own a method, or have a sense of achievement, although there are may not be the optimal solution)
Back to the topic, looking for a circle online, to tell the truth, other people's plug-in, do really great, and a variety of browser compatibility is also solved, but I personally, only in two or three pages used, and to import files (this seems not to be particularly troublesome), and to use others, after all, there is no sense of achievement.
Finally, I wrote it myself. It took me a while and I ran into a few problems, but it was not bad. The problem was solved and I became at least a little familiar with some of the built-in functions of jQuery.
ps: Finally, after I find the solution, I baidu again 1 times, ok, the first page comes out, click in is the method I used.
bug reproduced: Originally wanted to make a GIF, it seems too much trouble, or code, know this problem should not have to look at the GIF also know what kind of problem; If you don't know the problem, you can copy the code and try 1.
PS: Here's an example of an animate animation
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>test</title>
<meta charset="utf-8">
<link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="./font-awesome/css/font-awesome.min.css">
<script src="./bootstrap/js/jquery-1.11/jquery.min.js"></script>
<script src="./bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div style="width:70%;margin:50px auto;height:300px;">
<div id="test" style="width:900px;height:100px;border:1px solid red;overflow:hidden;">
<div class="test" style="margin-left:-6em">
<a>
Test text
<i class="fa fa-arrow-right"></i>
</a>
</div>
</div>
</div>
<script>
$("[data-toggle='tooltip']").tooltip();
$("#test").on("mouseover",function(){
var $this = $(this);
var $thisTest = $this.find("div.test");
$thisTest.css("position","relative");
// $thisTest.stop();
$thisTest.filter(':not(:animated)').animate({marginLeft:"0em"});
})
.on("mouseout",function(){
var $this = $(this);
var $thisTest = $this.find("div.test");
$thisTest.css("position","relative");
// $thisTest.stop();
$thisTest.filter(':not(:animated)').animate({marginLeft:"-6em"});
})
// Continuous trigger animation bug
// Animations are not allowed to accumulate; Or stop the current animation before starting a new one
</script>
</body>
</html>The above code, stop(), has been commented out by me, which I personally think is the most perfect solution. The one that has not been commented out is another solution mentioned by others after I searched for 1. However, I personally feel that it is not quite perfect, and I will mention the difference later.
At first,
$thisTest.filter(':not(:animated)').animate({marginLeft:"0em"});
$thisTest.filter(':not(:animated)').animate({marginLeft:"-6em"});These two lines of code don't have the filter() function, which is what the code looks like when you first hit bug.
The reason for this bug is that the event happened in a short period of time (the last animation was not finished), and the animation accumulated (if you encounter this problem, you will know this reason if you look at the code). So, there are two solutions.
【 filter 】
The first is filtered with filter, which filters out the elements that are being animated before the animation occurs, so that only those elements that the previous animation has finished can trigger a new event.
Then that brings a new question, when I move the mouse to the corresponding content, mouseover trigger events, this time, at the end of the animation is not, I will remove the mouse corresponding content area, mouseleave trigger events, but because the animation is not over 1, so even if triggered this event, but the expected function does not perform, the expected "mouseleave event trigger, content hidden" result can't do it.
Of course, this scheme does not matter if the operator stops mouse 1 on the corresponding content before the animation triggered by the mouseover event is over.
【 stop 】
For stop(), although you know it, move it again.
// Grammatical structure
$("#div").stop();// Stop the current animation and continue 1 An animation
$("#div").stop(true);// Clears all animations of the element
$("#div").stop(false, true);// Make the current animation go straight to the end state To continue the 1 An animation
$("#div").stop(true, true);// Clears all animations of the element so that the current animation goes directly to the end state The idea of this scheme is simple: when I am mouseover, I will trigger the corresponding animation, but when the animation is not finished, I want to trigger the corresponding animation of mouseleave at the same time. At this time, I need to stop the animation of the corresponding element. And then the bug doesn't exist.
Finally, well, it seems nothing summary for this essay, is familiar with animate, slide, fade animation function, at the same time to familiar with 1 next stop parameters without difference (speak true, at first I didn't think to use stop, 1 two days later, accidentally see API, saw stop, it suddenly conceived the idea in stop solve this bug).
Above is this site this site to share to you about animate, slide, fade and other animation of the continuous trigger, delayed repeated execution of bug, hope to help you in the future work and learning.