zoukankan      html  css  js  c++  java
  • jQuery--效果

    1.效果API简介

    基本(通过改变元素的高度和宽度来进行显示和隐藏)
      show(speed,fn)显示
        参数一:speed速度
        参数二:回调函数。动画效果完成之后回调函数
      hide()隐藏
      toggle()切换
    滑动(通过改变元素的高度来进行显示或隐藏)
      slideDown()显示
      slideUp()隐藏
      slideToggle()切换。参数同上
    淡入淡出(通过改变元素透明度进行显示或隐藏)
      fadeIn()
      fadeOut()
      fadeTo(speed,opacity,fn)
        参数二:opacity透明度,0~1之间

    2.代码实例

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    	<style type="text/css">
    		
    		div{
    			border:1px solid #000;
    			100px;
    			height:100px;
    		}
    	</style>
    	<!-- 导入js库 ,注意:使用src属性之后,标签体中不能写入内容-->
    	<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
    	<script type="text/javascript">
    		
    		$(document).ready(function(){
    			
    			$("#b1").click(function(){
    				$("#b1Div").toggle("1000");
    			});
    			$("#b2").click(function(){
    				$("#b2Div").slideToggle("slow");
    			});
    			$("#b3").click(function(){
    				$("#b3Div").fadeToggle("slow");
    			});
    		});
    		
    	</script>
    </head>
    <body>
    	<input type="button" id="b1" value="显示/隐藏 b1Div" />
    	<div id="b1Div"></div> <br/>
    	<input type="button" id="b2" value="滑出/滑入b2Div"/>
    	<div id="b2Div"></div> <br/>
    	<input type="button" id="b3" value="淡出/淡入b3Div"/>
    	<div id="b3Div" style="background-color: red;"></div>
    		
    </body>
    </html>
    

      

  • 相关阅读:
    /etc/init.d/functions详解[转]
    把linux可执行程序做成一个服务[转]
    Centos下Subversion 服务器安装配置(转)
    经典面试编程题atoi()实现
    asp.net mvc 模型绑定 从简单类型到泛型集合
    C# 编译器 csc 简单用法
    js 操作文本框中光标位置
    简洁的lambda表达式
    iphone safari不支持position fixed的解决办法
    List排序函数Sort
  • 原文地址:https://www.cnblogs.com/jxxblogs/p/9786535.html
Copyright © 2011-2022 走看看