jQuery效果

最新推荐文章于 2024-07-30 10:56:44 发布

ㅤㅤㅤ。。。

最新推荐文章于 2024-07-30 10:56:44 发布

阅读量146

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/qq_64272127/article/details/127419502

版权

jQuery显示与隐藏

hide：如何隐藏部分文本。

show：如何显示部分文本,或者是fadeIn也可以表示显示文本。

例：

$(select).hide();
$(select).show();

jQuery Fading 方法

通过 jQuery，可以实现元素的淡入淡出效果。

jQuery 拥有下面四种 fade 方法：

fadeIn():用于淡入已隐藏的元素。

$(select).fadeIn(3000);---括号内可以规定效果的时长

fadeOut():用于淡出可见元素

$(select).fadeOut();---括号内可以规定效果的时长，可以取以下值："slow"、"fast" 或毫秒。

fadeToggle():可以在 fadeIn() 与 fadeOut() 方法之间进行切换

如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。

$(select).fadeToggle();

fadeTo():允许渐变为给定的不透明度（值介于 0 与 1 之间）。

$(select).fadeTo();

jQuery 滑动方法

通过 jQuery，您可以在元素上创建滑动效果。

jQuery 拥有以下滑动方法：

slideDown()：用于向下滑动元素。

$(select).slideDown();---括号内可以取以下值："slow"、"fast" 或毫秒。

slideUp()：用于向上滑动元素。

$(select).slideUp();

slideToggle()：可以在 slideDown() 与 slideUp() 方法之间进行切换。

如果元素向下滑动，则 slideToggle() 可向上滑动它们。如果元素向上滑动，则 slideToggle() 可向下滑动它们。

$(select).slideToggle();

jQuery 效果动画

jQuery animate() ：用于创建自定义动画。

注意：生成动画的过程中可同时使用多个属性：

例：

$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
});

jQuery stop() ：用于在动画或效果完成前对它们进行停止。

注意：stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。

$("#stop").click(function(){
  $("#panel").stop();
});

菜单折叠案例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>折叠菜单</title>
		<style type="text/css">
			* {
				padding: 0px;
				margin: 0px;
			}

			ul li {
				list-style: none;
			}

			a {
				text-decoration: none;
			}

			#d {
				width: 350px;
				border: 1px darkgrey solid;
				margin: 10px auto;
				overflow: auto;
			}

			#head {
				width: 350px;
				height: 50px;
				line-height: 50px;
				background-color: darkgray;
			}

			#head h2 {
				float: left;
				margin-left: 10px;
			}

			#head span {
				display: block;
				width: 25px;
				height: 12.5px;
				background: url(img/pic.png);
				float: right;
				margin-top: 18px;
				margin-right: 10px;
			}

			#con{
				padding: 10px;
				overflow: auto;
				/*高度自适应*/
			}

			#con ul li {
				width: 110px;
				height: 25px;
				line-height: 25px;
				float: left;
			}

			#foot a {
				display: block;
				width: 60px;
				height: 30px;
				text-align: center;
				line-height: 30px;
				/*background-color: red;*/
				float: right;
				margin-right: 10px;
			}
		</style>
		<script src="js/jquery.min.js"></script>
		<script>
			$(function(){
				$("#pic").click(function(){
					//需要判断一种状态，如果是a那么变成b，否者变成a
					var index=$(this).attr("index");
					if(index==0){
						//完成图片更换和下面部分隐藏
						$(this).css("background","url(img/pic.png) 0 12.5px");
						// 将结尾以一秒的速度向上平移
						$("#con").slideUp(1000);
						$("#foot").slideUp(1000);
						//改变本身的标记
						$(this).attr("index",1);
					}else{
						//完成图片更换和下面部分显示
						$(this).css("background","url(img/pic.png)");
						// 将结尾以一秒的速度下滑
						$("#con").slideDown(1000);
						$("#foot").slideDown(1000);
						//改变本身的标记
						$(this).attr("index",0);
					}
				});
				// 菜单简化
				var fl=true
				$("#foot a").click(function(){
					if(fl){
						// 点击的时候,li索引大于4的隐藏
						$("#con>ul>li:gt(4)").not(":last").fadeOut();
						// 内容变更多
						$(this).text("更多👉")
						// 将fl的值改变
						fl=false
					}else{
						// 点击的时候,所有的li显示
						$("#con>ul>li").fadeIn()
						// 内容变为更多
						$(this).text("简化👈")
						// 将fl的值转换,可循环使用
						fl=true
					}
					// 返回值
					return false
				})
			});
		</script>
	</head>
	<body>
		<div id="d">
			<div id="head">
				<h2>图书分类</h2>
				<span id="pic" index="0">

				</span>
			</div>
			<div id="con">
				<ul>
					<li><a href="#">小说</a><i>(1110)</i></li>
					<li><a href="#">文艺</a><i>(2350)</i></li>
					<li><a href="#">青春</a><i>(1985)</i></li>
					<li><a href="#">少儿</a><i>(1102)</i></li>
					<li><a href="#">生活</a><i>(2350)</i></li>
					<li><a href="#">社科</a><i>(5684)</i></li>
					<li><a href="#">管理</a><i>(1256)</i></li>
					<li><a href="#">计算机</a><i>(2135)</i></li>
					<li><a href="#">教育</a><i>(3120)</i></li>
					<li><a href="#">工具书</a><i>(4213)</i></li>
					<li><a href="#">引进版</a><i>(1752)</i></li>
					<li><a href="#">其他类</a><i>(9872)</i></li>
				</ul>
			</div>
			<div id="foot">
				<a href="">简化👈</a>
			</div>
		</div>
	</body>
</html>

ㅤㅤㅤ。。。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery效果

注意：stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。---括号内可以取以下值："slow"、"fast" 或毫秒。括号内可以规定效果的时长，可以取以下值："slow"、"fast" 或毫秒。如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。如果元素向下滑动，则 slideToggle() 可向上滑动它们。如果元素向上滑动，则 slideToggle() 可向下滑动它们。
复制链接

扫一扫