JS动画

最新推荐文章于 2025-06-04 18:19:51 发布

原创最新推荐文章于 2025-06-04 18:19:51 发布 · 713 阅读

CC 4.0 BY-SA版权

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>动画</title>
</head>
<body>
	<h1>动画</h1>
	<hr>
	<button class="b1">隐藏</button>
	<button class="b2">显示</button>
	<button class="b3">显隐</button>
	<button class="b4">slide显隐</button>
	<button class="b5">fade显隐</button>
	<div class="box"></div>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script>
	$('.b1').on('click',function() {
		$('.box').hide()
	})
	$('.b2').on('click',function() {
		$('.box').show()
	})
	$('.b3').on('click', function () {
		$('.box').toggle()
	})
	$('.b4').on('click', function () {
		$('.box').slideToggle()
	})
	$('.b5').on('click', function () {
		$('.box').fadeToggle(1000, "linear", function () {
			console.log("动画完成");
		})
		// 参数: 时间, 运动曲线, 动画结束后的回调函数
	})
</script>
</html>

注意:轮播图的左右滑动

//为input添加点击事件
$('input').click(function() {
        //为ul添加动画函数{函数体},动画执行的时间
		$('ul').animate({
            //与定位一起使用,距左边的宽度:获取点击体的索引和宽度,相乘
			left: -$(this).index() * $(this).width()
		},300)
	})