jQuery3_动画

最新推荐文章于 2024-11-12 11:19:19 发布

摘星_FF

最新推荐文章于 2024-11-12 11:19:19 发布

阅读量217

点赞数

分类专栏： HTML 文章标签： javascript jquery html

本文链接：https://blog.csdn.net/qq_43462448/article/details/123863682

版权

HTML 专栏收录该内容

26 篇文章 1 订阅

订阅专栏

本文详细介绍了jQuery3中的动画效果，包括显示/隐藏动画、滑动动画、淡入淡出动画以及如何自定义动画函数。通过指定速度参数，如'slow'、'normal'、'fast'或自定义毫秒数，可以实现不同速度的动画效果。同时，还提到了delay函数用于延后动画执行。

摘要由CSDN通过智能技术生成

一. 本章内容

jQuery动画操作

二. 内容

2.1 动画

2.1.1 显示/隐藏动画

* show( 参数):元素显示动画特效
* hide( 参数):元素隐藏动画特效
* toggle( 参数):元素显示/隐藏切换动画特效

无参数：元素将直接显示/隐藏，没有动画特效

slow：慢速（在600ms内）显示/隐藏

normal：正常速度（在400毫秒内）显示/隐藏

fast：快速（在200毫秒内）显示/隐藏

自定义数字：开发人员可以自己设置一个数字表示速度，单位毫秒

//show显示
$("input[value='showBtn']").click(function(){
    //$("#div01").show();不写东西立即出现
    $("#div01").show(1000);
})
//hide隐藏
$("input[value='hideBtn']").click(function(){
    $("#div01").hide(1000);
})
//toggle：当前显示就隐藏  当前隐藏就显示
$("input[value='toggleBtn']").click(function(){
    $("#div01").toggle("slow");//slow：慢600ms  normal：正常：400  fast：200
})

2.1.2 滑动动画：

* slideDown	：元素向下滑动特效（高度增加）
* slideUp( )：元素向上滑动特效（高度减少）
* slideToggle( )：元素向上/向下滑动切换特效

/显示：卷帘形式显示
			$("input[value='slideDownBtn']").click(function(){
				$("#div01").slideDown(1000)
			})
			//卷帘形式隐藏
			$("input[value='slideUpBtn']").click(function(){
				$("#div01").slideUp(1000)
			})
			//卷帘形式：当前显示就隐藏  当前隐藏就显示
			$("input[value='slideToggleBtn']").click(function(){
				$("#div01").slideToggle(1000)
			})

2.1.3 淡入淡出动画

淡入淡出是指控制元素的透明度从0（隐藏）到1（显示）或从1到0

* fadeIn( )：元素淡入动画特效（透明度从0到1）
* fadeOut( )：元素淡出动画特效（透明度从1到0）
* fadeTo( )：调整元素的透明度到指定值（0到1范围内的小数）
* fadeToggle( )：元素淡入/淡出切换动画特效

//显示：淡入
$("input[value='fadeInBtn']").click(function(){
    $("#div01").fadeIn(2000)
})
//隐藏：淡出
$("input[value='fadeOutBtn']").click(function(){
    $("#div01").fadeOut(2000)
})
$("input[value='fadeToBtn']").click(function(){
    $("#div01").fadeTo(2000,"0.5")//fadeTo：既不是显示也不是隐藏：将对象调整到指定透明度 0 ---0.5   1---0.5
})
//当前显示就隐藏，当前因就显示——淡入淡出
$("input[value='fadeToggleBtn']").click(function(){
    $("#div01").fadeToggle(2000)
})

2.1.4 自定义动画函数

animate ( { 属性1 : 值 , 属性2 : 值 , … … } , speed )

delay函数用来延时推迟后面动画的执行

<body>
		<input id="move" value="移动" type="button"/>
		<div id="div01" style="width: 100px;height:100px;background:url(a.jpg) no-repeat 0px 0px/100% 100% ;
			position:absolute;left:10px;top: 50px;">
		</div>
		<script src="../jquery01/jquery-3.5.0.min.js"></script>
		<script>
			$("#move").click(function(){
				//$("#div01").css({"left":"1000px","top":"1000px"})
				$("#div01").animate({"left":"700px","top":"400px"},10000).delay(1000).animate({"left":"0px","top":"0px"},10000)
			})
		</script>
</body>