zoukankan      html  css  js  c++  java
  • 显示与隐藏

    显示与隐藏

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		
    		<script type="text/javascript" src="jquery-3.4.1.js"></script>
    		<script type="text/javascript">
    			//动画显示
    			function testAnimate(){
    				$("div").animate({
    					height:"300px",
    					"500px"
    					
    				},3000,function(){
    					alert("加载完毕")
    				})
    			}
    			//动画
    			function testAnimate2(){
    				$("div").animate({
    					height:"20px",
    					"100px"
    					
    				},3000,function(){
    				})
    			}
    			//上划
    			function testSlideUp(){
    				$("div").slideUp()
    			}
    			//下拉
    			function testSlideDown(){
    				$("div").slideDown()
    			}
    			//显示
    			function testDisplayShow(){
    				$("div").css("display","block")
    			}
    			//隐藏
    			function testDisplayHide(){
    				$("div").css("display","none")
    			}
    			//显示
    			function testShow(){
    				$("div").show(3000);
    			}
    			//隐藏
    			function testHide(){
    				$("div").hide(3000)
    			}
    			//淡入
    			function testFadeIn(){
    				$("div").fadeIn();
    			}
    			//淡出
    			function testFadeOut(){
    				$("div").fadeOut();
    			}
    		</script>
    	</head>
    	<body>
    		<div>
    			hello div
    		</div>
    		<button onclick="testAnimate()">testAnimate</button>
    		<button onclick="testAnimate2()">testAnimate2</button><br />
    		<button onclick="testSlideUp()">testSlideUp</button>
    		<button onclick="testSlideDown()">testSlideDown</button><br />
    		<button onclick="testDisplayShow()">testDisplayShow</button>
    		<button onclick="testDisplayHide()">testDisplayHide</button><br />
    		<button onclick="testShow()">testShow</button>
    		<button onclick="testHide()">testHide</button><br />
    		<button onclick="testFadeIn()">testFadeIn</button>
    		<button onclick="testFadeOut()">testFadeOut</button>
    	</body>
    </html>
    
    
  • 相关阅读:
    设置IIS允许下载.config文件
    SQL Server 触发器
    MVC参数自动装配
    sql之left join、right join、inner join的区别
    C# 之泛型详解
    Frameset使用教程
    网页引用Font Awesome图标
    ubuntu下apache2 安装 配置 卸载 CGI设置 SSL设置
    深入理解JAVA I/O系列二:字节流详解
    深入理解JAVA I/O系列三:字符流详解
  • 原文地址:https://www.cnblogs.com/x-i-n/p/12129757.html
Copyright © 2011-2022 走看看