jq向右移动函数,动画函数,停止函数使用属性.,
<!DOCTYPE html>
<html>
<head charset='utf-8'>
<title>jq淡入淡出效果!</title>
<script type="text/javascript" src="css/jquery-3.4.1.min.js"></script>
<style type="text/css">
.box1{height: 200px;width: 200px;background:red;}
.box2{height: 200px;width: 200px;background:red;position: absolute;}
button{height: 40px;width: 200px;border:none;}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function () {
$('.box1').hide()
$('.but1').click(function(){
$('.box1').fadeIn(3000)
$('p').animate({fontSize:'40px'},1500)
$('.box2').animate({left:'400px'},1500)
})
// body...
$('#rigth').click(function(){
$('.box2').animate({left:'+500px'},3000)
})
$('#stop').click(function(){
$('.box2').stop()
})
})
</script>
<button class="but1">淡入</button>
<div class="box1"></div>
<p>jq当中我们使用的是自定义动画效果@</p>
<div class="box2">php中文网</div>
<button id="rigth">向右移动</button>
<button id="stop">停止移动</button>
</body>
</html>
