Web实训知识点-0409

最新推荐文章于 2023-03-12 22:24:54 发布

胖罐子哟

最新推荐文章于 2023-03-12 22:24:54 发布

阅读量132

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_43961960/article/details/89288227

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

jQuery动画效果练习

一、动画隐藏和显示
方法：hide（）和show（）
toggle（）表示切换hide和show的状态

$(document).ready(function(){
        $("#button1").click(function(){
           $ ( "p").hide(500,function(){
               alert("隐藏完成")
           })
        })
        $("#button2").click(function(){
            $( "p").show(200,function(){
                alert("显示成功")
            })
        })
        $("#button3").click(function(){
                $("p").toggle(1000,function(){
                    $("p").css({color:"yellow"})
                })
            })
        })

二、动画滑动
方法：#slide和#panel

#slide,#panel{
      padding: 5px;
      text-align: center;
      background-color: #33b5e5;
      border: solid 1px red;
  }
  #panel{
      display: none;
      padding: 40px;
  }
</style>
<script>
	$(document).ready(function(){
		$("#slide").click(function(){
			$("#panel").slideToggle()
		})
	})	
</script>

三、animate方法创建自定义的动画
语法：$(select).animate({params},speed,cellback)

注意：
1 必须的params参数必须写在大括号内其他的参数和上面一致

2.在未给定位之前，html里的元素都默认有一个静态定位，且是不可移动的。如果想要移动，要将position设置为absolute，relative

3.animate方法几乎可以改变所有的的css属性，但前提是该属性用驼峰命名法命名

比如：在css中：background-color ： black；在animate中：backgroundColor：“black”

4.animate使用相对值：在需要提升的值上加“+=”，即可实现“继续增加”

5.animate使用队列功能：如果编写多个animate()调用，jQuery会创建包含这些方法内部调用的队列

开始动画
默认情况下，所以的HTML元素有一个静态的位置，且是不可移动的，如果需要改变，那么需要将元素的position的属性设置为：absolute，relatIve，fixed；

animate（）：使用相对值

 $(document).ready(function(){
        $("#button").click(function(){
            $("div").animate({
                left:"200px",opacity:'0.5',height:'160px',width:'160px'
            })
        })
    })

通过animate（），使用队列功能（如果你在彼此之后向编写多个animate（）调用。jQuery会创建包含这些方法调用的“内部”，队列然后逐一运行这些animate调用）

$(document).ready(function(){
        $("#button").click(function(){
            var div= $("div")
            div.animate({height:"160px" ,opacity:"0.5"},1000)
            div.animate({fontSize:"2px" },1000)
            div.animate({width:"160px" ,opacity:"0.9"},1000)
            div.animate({height:"100px" ,opacity:"0.5"},1000)
            div.animate({height:"100px" ,opacity:"0.9"},1000)
            div.animate({fontSize:"10px" },1000)
        })
    })

停止动画：stop()
stop()用于在动画完成前对它进行停止，只能暂停队列中的一个动画，如果队列中有很多个动画，它会结束当前的动画，然后运行下一个动画

 $(document).ready(function(){
        $("#button").click(function(){
            var div= $("div")
            div.animate({height:"160px" ,opacity:"0.5"},1000)
            div.animate({fontSize:"2px" },1000)
            div.animate({width:"160px" ,opacity:"0.9"},1000)
            div.animate({height:"100px" ,opacity:"0.5"},1000)
          17:01 2019/4/9  div.animate({height:"100px" ,opacity:"0.9"},1000)
            div.animate({fontSize:"10px" },1000)
            $("#button1").click.(function(){
           $("div").stop()
        })
          })
            })

四、jQuery——链（chaining）

通过jQuery，可以把方法连接在一起，chaining允许我们在一条语句中运行多个方法（在同一元素上）
$(“p”).css({color:“red”}).slideUp(2000).slideDown(2000).animate(backgroundColor:“blue”);

作业

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>二级菜单</title>
		<script src="jquery-1.8.3.min.js"></script>
		<script>
			$(document).ready(function(){
				
			})
		</script>
		<style>
			*{
				list-style: none;
				text-decoration: none;
				font-family: "黑体";
			}
			a{
				color: black;
			}
			nav{
				height: 40px;
				width: 500px;
				background-color: aqua;
				margin: 0 auto;
			}
			nav ul {
				margin: 0 auto;
			}
			nav ul li{
				height: 40px;
				width: 70px;
				text-align: center;
				line-height: 40px;
				float: left;
				margin-left: 8px;
				position: relative;
			}
			nav ul li:hover{
				background-color: green;
			}
			nav ul li:hover a{
				color: yellow;
			}
			nav ul li ul{
				float: none;
				padding: 0;
				position: absolute;
				left: -8px;
				display: none;
			}
			nav ul li ul li{
				background-color: indigo;
				height: 40px;
				width: 90px;
			}
			nav ul li ul li:hover{
				background-color: yellow;
				
			}
			nav ul li ul li:hover a{
				color: indigo;
				
			}
		</style>
	</head>
	<body>
		<nav>
			<ul>
				<li>
					<a href="#">首页</a>
				</li>
				<li "divDisplay_one()" "div_one()">
					<a href="#">课程大厅</a>
					<ul id="one">
						<li>
							<a href="#">web网页实战</a>
						</li>
						<li>
							<a href="#">服务端技术</a>
						</li>
						<li>
							<a href="#">Python技术</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="#">学习中心</a>
				</li>
				<li "divDisplay_two()" "div_two()">
					<a href="#">经典案例</a>
					<ul id="two">
						<li>
							<a href="#">Java</a>
						</li>
						<li>
							<a href="#">HTML</a>
						</li>
						<li>
							<a href="#">C#</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="#">关于我们</a>
				</li>
			</ul>
		</nav>
	</body>
	<script>
		var a = $("#one");
		var b = $("#two");
		function divDisplay_one(){
			a.css({display:"block"});
		}
		function div_one(){
			a.css({display:"none"});
		}
		function divDisplay_two(){
			b.css({display:"block"});
		}
		function div_two(){
			b.css({display:"none"});
		}
	</script>
</html>

以上代码实现效果如下图↓↓↓
在这里插入图片描述

胖罐子哟

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web实训知识点-0409

jQuery动画效果练习一、动画隐藏和显示方法：hide（）和show（）toggle（）表示切换hide和show的状态$(document).ready(function(){ $("#button1").click(function(){ $ ( "p").hide(500,function(){ alert("隐藏...
复制链接

扫一扫