Share bugs about the continuous triggering, lagging and repeated execution of animate, slide, fade and other animations in jQuery

Share bugs about the continuous triggering, lagging and repeated execution of animate, slide, fade and other animations in jQuery_jquery

WBOY

Release： 2016-05-16 15:20:34

Original

1988 people have browsed it

My style of writing articles is that I like to talk about the background of the problem and legal injury at the beginning:

Because I recently wanted to call out the operation options, I thought of hiding it by default and displaying it when the mouse moves over it.

At first I planned to add a class="active", which will directly trigger add when mouseover (or mouseenter), and remove when mouseout (or mouseleave). This solution is very simple and practical, but the experience may not be that good. It’s cool (ok, I used this word, and it felt so low instantly), so I thought of using jQuery animations like animate or slide, and to be honest at the beginning, if I write this plug-in myself, I will encounter some problems, so it’s not very It’s easy to implement (after all, my mastery of js is not very good), and then I listened to my colleagues and found jquery, and just quoted it directly after importing it.

(Fortunately, I don’t have the habit of looking for plug-ins online when I want to do a certain special effect. Speaking of this, I also thought about what I encountered a few days ago about scrolling the table header in the interface. The solution has been fixed, and it will be uploaded in a few days. To be honest, I searched around the Internet for that method but couldn’t find a suitable solution. Finally, I came up with a solution myself, which is quite satisfying, although it may not be the best solution. Excellent solution)

Back to the topic, I searched around on the Internet. To be honest, other people’s plug-ins are really good, and the compatibility under various browsers has also been solved. However, personally, I only use two or three plug-ins. The page is used, and the file needs to be imported (this doesn't seem to be particularly troublesome), and it needs to be used by someone else. After all, there is no sense of accomplishment.

Then, I finally wrote it myself. Although it took some time and encountered some problems, it was still good. The problem was finally solved. At least I became more familiar with several jQuery built-in functions.

ps: One last thing to add, after I found the solution myself, I searched Baidu again. Well, clicking on the first web link that came out was the method I used.

Bug recurrence: I originally wanted to make an animation, but it seems too troublesome, so let’s write the code. Those who know this problem should know what the problem is without looking at the animation; those who don’t know this problem, you can first Copy the code and try it out.

PS: The following takes animate animation as an example

<!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>
测试用的文字
<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"});
})
//连续触发动画bug
//不允许动画累积；或是在新的动画开始前，先停止当前正在进行的动画
</script>
</body>
</html>

Copy after login

In the above code, the stop() method was commented out by me. It is the most perfect solution in my opinion. The one that was not commented out was another one mentioned by others after I searched it on Baidu. It’s a solution, but I personally don’t think it’s particularly perfect. I’ll mention the difference later.

In the beginning,

$thisTest.filter(':not(:animated)').animate({marginLeft:"0em"});
$thisTest.filter(':not(:animated)').animate({marginLeft:"-6em"});

Copy after login

These two lines of code do not have a filter() function, which is what the code looked like when I first encountered this bug.

The cause of this bug is caused by the accumulation of animations in a short period of time (the previous animation has not finished playing) (I guess if you encounter this problem, you will know this reason if you look back at the code). Therefore, there are two solutions.

【filter】

One is to use filter to filter out the elements that are being animated before the animation occurs, so that only the elements whose previous animation has ended can trigger new events.

Then this brings a new problem. When I move the mouse to the corresponding content, the mouseover event is triggered. At this time, before the animation is over, I remove the mouse outside the corresponding content area. The mouseleave event is triggered, but because the previous animation has not ended, even if the event is triggered, the expected function is not executed. At this time, the expected result of "mouseleave event is triggered and the content is hidden" cannot be achieved.

Of course, if the operator keeps the mouse on the corresponding content before the animation triggered by the mouseover event ends, this solution will not have any impact.

【stop】

As for stop(), although I know that everyone knows it, let’s move it again.

//语法结构
$("#div").stop();//停止当前动画，继续下一个动画
$("#div").stop(true);//清除元素的所有动画
$("#div").stop(false, true);//让当前动画直接到达末状态 ，继续下一个动画
$("#div").stop(true, true);//清除元素的所有动画，让当前动画直接到达末状态

Copy after login

The idea of this solution is simple: when I mouseover, the corresponding animation is triggered, but before the animation is over, I want to mouseleave, and at the same time trigger the animation corresponding to mouseleave. At this time, I need to stop The ongoing animation of the corresponding element. Then, the bug will no longer exist.

Finally, okay, this essay seems to have no summary. In fact, it is just familiarity with the animate, slide, and fade animation functions. At the same time, I am also familiar with the difference between stop with parameters and without parameters (to be honest, there was no parameter at the beginning). I thought of using stop. A day or two later, when I accidentally saw the API, I saw stop, and then I suddenly came up with the idea of using stop to solve this bug).

The above is what the editor of Script House shared with you about the bugs of continuous triggering and delayed repeated execution of animations such as animate, slide, and fade in jQuery. I hope it will be helpful to everyone in your future work and study.