jQuery部分效果的实现

最新推荐文章于 2024-11-06 15:47:31 发布

旧梦时节

最新推荐文章于 2024-11-06 15:47:31 发布

阅读量202

点赞数 1

文章标签： jquery html5

本文链接：https://blog.csdn.net/lqb_zxs/article/details/112908914

版权

本文详细介绍了jQuery中的动画效果，包括默认的显示、隐藏、切换效果，以及淡入淡出和滑动效果的使用。同时，文章还讲解了遍历DOM和事件处理的概念，提供了一段示例代码演示如何应用这些效果。此外，文章还提及了如何停止正在执行的动画并控制动画速度。

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

jQuery相关应用

文章目录

1.1 jQuery动画

1.1.1 默认效果

show([speed],[easing],[fn]) 显示
hide([speed],[easing],[fn]) 隐藏
toggle([speed],[easing],[fn]) 切换
参数介绍 : slow,数字

jQuery效果实现相关学习网站

https://animate.style/
http://kristofferandreasen.github.io/wickedCSS/
https://www.swiper.com.cn/

动画效果

show():显示
hide()隐藏
$().toggle():显示和隐藏效果切换
都可以传入参数，speed.

fadeOut(淡出)
fadeIn(淡入)
fadeToggle();淡入淡出切换
fadeTo(2000,0.3)将图片显示到透明度为30%的程度

1.1.2 滑动效果

slideDown 向下滑入显示
slideUp 向上滑入隐藏

滑动显示

slideDown()：
slideUp():
slideToggle():
都可以传入一个speed参数。

$(’:animated’);获取正在执行动画的元素。
将正在执行动画的元素停止：
$(’:animated’).stop():停止当前的动画。
stop(true)表示清除队列中的所有的动画，即动画立即停止，如果不传递参数，只是立刻停止当前的动画。
$(’:animated’).stop(false,true)第二个参数为true表示停止当前正在执行的动画，并且将元素设置为当前动画执行结束处的位置。

1.1.3 淡入淡出效果

fadeIn() 淡入
fadeOut() 淡出

相关效果实现代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box{
				width: 500px;
				height: 600px;
				background-color: #0000FF;
			}
		</style>
	</head>
	<body>
		<div class="box">
			
		</div>
		<button id="show">显示</button>
		<button id="hide">隐藏</button>
		<button id="toggle">切换</button>
		<button id="slideDown">下滑</button>
		<button id="slideUp">上滑</button>
		<button id="fadeIn">淡入</button>
		<button id="fadeOut">淡出</button>
		
		<script src="js/jquery-3.4.1.js"></script>
		<script type="text/javascript">
			var showBtn=$("#show");
			var hideBtn=$("#hide");
			var toggleBtn=$("#toggle");
			var slideDownBtn=$("#slideDown");
			var slideUpBtn=$("#slideUp");
			var fadeInBtn=$("#fadeIn");
			var fadeOutBtn=$("#fadeOut");
			
			var box=$(".box");
			
			showBtn.click(function(){
				box.show('slow');
			});
			hideBtn.on('click',function(){
				box.hide('slow');
			})
			toggleBtn.on('click',function(){
				box.toggle(1000);
			})
			slideDownBtn.on('click',function(){
				box.slideDown(1000);
			})
			slideUpBtn.on('click',function(){
				box.slideUp(1000);
			})
			fadeInBtn.on('click',function(){
				box.fadeIn(1000);
			})
			fadeOutBtn.on('click',function(){
				box.fadeOut(1000);
			})
			
			
		</script>
	</body>
</html>