jQuery的动画效果--停止动画

Original 2018-11-15 13:10:01 228
abstract:<!DOCTYPE html> <html> <head> <title>jQuery的动画效果--停止动画</title> <meta charset="utf-8">     <script type="text/
<!DOCTYPE html>
<html>
<head>
	<title>jQuery的动画效果--停止动画</title>
	<meta charset="utf-8">
    <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
	<style type="text/css"> 
		#box2,#box1{
			width: 500px;
			padding:5px;
			text-align:center;
			background-color:#FFFFFF;
			border:solid 1px #E9E9E9;
		}
		#box2{
			width: 500px;
			padding:5px;
			display:none;
		}
	</style>
	<script> 
		$(document).ready(function(){
  			$("#box1").click(function(){
    			$("#box2").slideToggle(3000)
    			// $("#box").slideUp("slow");
  			});
  		$("#stop").click(function(){
    		$("#box2").stop(true);
  			});
		});
	</script>
</head>
<body>
	<button id="stop">停止</button>
	<div id="box1">开始滑动</div>
	<div id="box2"><p>PHP中文网:独家原创,永久免费的在线php视频教程,</p><p>php技术学习阵地!</p></div>
</body>
</html>

向上/向下滑动+停止还算正常,但是有个问题,点停止之后,div中的字会多出来。不知道是哪里的问题。

Correcting teacher:灭绝师太Correction time:2018-11-15 14:24:23
Teacher's summary:因为你停止的是div的效果,内部的p标签的文字没有停止呀……

Release Notes

Popular Entries