第十一周学习——jQuery学习

最新推荐文章于 2024-10-20 17:33:48 发布

啦啦啦啦落

最新推荐文章于 2024-10-20 17:33:48 发布

阅读量95

点赞数

分类专栏：笔记文章标签： jquery html

本文链接：https://blog.csdn.net/weixin_54826115/article/details/117093144

版权

笔记专栏收录该内容

16 篇文章 0 订阅

订阅专栏

jQuery学习

1.淡入淡出

我们可以使用fadeIn()，fadeOut()，fadeToggle()和fadeTo()来实现淡入淡出特效。 fadeIn() 可以用来淡入元素，而fadeOut() 用于淡出元素， fadeToggle() 则是在 fadeIn() 与 fadeOut() 方法之间切换选择。如果元素已经淡出，则fadeToggle() 方法会向是淡入。反之，如果元素已淡入， fadeToggle()方法会是淡出。fadeTo()方法则是为渐变效果设置不透明度，
我们可以使用 speed 来规定效果的时长。
例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#1").click(function(){
    $("#div1").fadeIn("slow");
	 });
	 $("#2").click(function(){
	   $("#div1").fadeOut("slow");
	 	 }); 
});
</script>
</head>

<body>
<button id="1">淡入</button>
<br>
<div id="div1" style="width:80px;height:80px;display:none;background-color: aqua;">啦啦啦啦啦</div><br>
<br />
<button id="2">淡出</button>
<br><br>
</body>
</html>

运行结果图：
在这里插入图片描述

2.滑动

我们可以通过slideDown()，slideUp()和slideToggle()方法来实现元素的滑动。slideDown()是用来向下滑动，slideUp()则是用来向上滑动，而slideToggle()则是可以在两种情况之间进行切换。如果元素已经向下滑动，那么使用 slideToggle() 就是向上滑动元素。反之，如果元素是已经向上滑动的状态，则使用slideToggle() 可以向下滑动元素。