A small effect on the movement of the internal picture on the mouse

Code first.

HTML a simple div nested

<ul>
    <li>
	<div class="cool"></div>
    </li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

CSS lays out the simplest styles

*{
	margin: 0px;
	padding: 0px;
}
ul {
	width: 1000px;
	height: 300px;
	list-style: none;
	margin: 100px auto;
}
ul li {
	float: left;
	width: 200px;
	height: 100%;
}
ul li:nth-of-type(1){
	background: red;
	position: relative;
}
ul li:nth-of-type(2){
	background: green;
}
ul li:nth-of-type(3){	
	background: pink;
}
ul li:nth-of-type(4){
	background: orange;
}
ul li:nth-of-type(5){
	background: yellow;
}
.cool{
	width:80%;
	height:80%;
	background: blue;
	position: relative;
	left: 10%;
}

<script src="jquery-1.12.3.js"></script>
	<script type="text/javascript">
		$("ul li:nth-of-type(1)").mouseenter(function(){
			$(this).css("background-color","yellow");
			$(".cool").stop().animate({"top":50},400);
		}).mouseleave(function(event){
			$(this).css("background-color","red");
			$(".cool").stop().animate({"top":0},0);
		})
    </script>

Writing here the problem arises. Originally I used mouseover and out. But after the mouse enters. The inner box will start shaking inexplicably,

So, I simply studied the difference between mouseover and mouseenter

1.mouseover and mouseenter
Regardless of whether the mouse pointer passes through the selected element or its child elements, the mouseover event will be triggered.
The mouseenter event is fired only when the mouse pointer crosses the selected element.

2.mouseout and mouseleave
Regardless of whether the mouse pointer leaves the selected element or any child element, the mouseout event will be triggered.
The mouseleave event is fired only when the mouse pointer leaves the selected element.

Attached solution address: https://blog.csdn.net/hsd2012/article/details/51644419

However, in the later test, it was found that when the mouse quickly swiped the box many times, the inner box would execute the effect in sequence according to the bubble sort.

So that the mouse has left the box, but the inner box is still moving

Finally, I thought of jQuery's stop(), its function is to stop the currently running animation, just stop the currently running animation, and then move up and down in the implementation, and then write the code

$("div.div2").stop().animate({bottom:'10px'},1000);})

When the mouse is moved away, the picture will return to its original position.

Attached solution address:

https://blog.csdn.net/zygg5521/article/details/47611101

https://blog.csdn.net/ltx851201/article/details/6800553

A small effect on the movement of the internal picture on the mouse

Guess you like