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

    jQuery

    效果

    1)基本
    2)滑过
    3)淡入淡出
    4)自定义
    5)设置
    

    基本

    show(显示隐藏的匹配元素。)

    css代码
    <p style="display: none">hello,hehe</p>
    jquery代码
    $("p").show(); 
    
    动画效果
    1)$("p").show("slow");
    
    2)$("p").show("normal");
    
    3)$("p").show("fast");
    
    4)$("p").show(1000,"swing",function(){
    	console.log("动画执行完成")
    });
    

    hide(隐藏显示的元素。)

    css代码
    <p>hello,hehe</p>
    jquery代码
    $("p").hide(); 
    
    动画效果
    1)$("p").hide(1000);
    
    2)$("p").hide("slow");
    
    3)$("p").show("normal");
    
    4)$("p").show("fast");
    

    toggle(用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的 click 事件。)

    css代码
    <p>hello,hehe</p>
    <input type="button" value="切换" id="btn1">
    jquery代码
    $("#btn1").click(function(){
    	$("p").toggle("normal");
    })
    
    另一种(2个或者多个)
    
    function a(){
    	alert("hehe1")
    }
    function b(){
    	alert("hehe2")
    }
    $("p").toggle(a,b); 
    

    滑过

    slideDown(通过高度变化(向下增大)来动态地显示所有匹配的元素,在显示完成后可选地触发一个回调函数。)

    css代码
    <p style="300px;height: 500px;background:red;display: none">hello,hehe</p>
    <input type="button" value="切换" id="btn1">
    jquery代码
    $("#btn1").click(function(){
      $("p").slideDown()
    });
    

    slideUp(通过高度变化(向上减小)来动态地隐藏所有匹配的元素,在隐藏完成后可选地触发一个回调函数。)

    css代码
    <p style="300px;height: 500px;background:red;display: none">hello,hehe</p>
    <input type="button" value="切换2" id="btn2">
    jquery代码
    $("#btn2").click(function(){
      $("p").slideUp()
    });
    

    slideToggle(通过高度变化来切换所有匹配元素的可见性,并在切换完成后可选地触发一个回调函数。

    css代码
    <p style="300px;height: 500px;background:red;display: none">hello,hehe</p>
    <input type="button" value="切换3" id="btn3">
    jquery代码
    $("#btn3").click(function(){
      $("p").slideToggle()
    });
    

    淡入淡出

    fadeIn(通过不透明度的变化来实现所有匹配元素的淡入效果,并在动画完成后可选地触发一个回调函数。)

    html代码
    	div{
    		 200px;
    		height: 200px;
    		background: red;
    		display: none;
    	}
    css代码
    	<input type="button" value="淡入">
    	<div></div>
    jquery代码
    $("input").first().click(function(){
    	$("div").fadeIn(5000);
    })
    

    fadeOut(通过不透明度的变化来实现所有匹配元素的淡出效果,并在动画完成后可选地触发一个回调函数。)

    html代码
    	div{
    		 200px;
    		height: 200px;
    		background: red;
    		display: none;
    	}
    css代码
    	<input type="button" value="淡出">
    	<div></div>
    jquery代码
    $("input").eq(1).click(function(){
    	$("div").fadeOut(5000);
    })
    

    fadeOut(通过不透明度的变化来实现所有匹配元素的淡出效果,并在动画完成后可选地触发一个回调函数。)

    html代码
    	div{
    		 200px;
    		height: 200px;
    		background: red;
    		display: none;
    	}
    css代码
    	<input type="button" value="淡出">
    	<div></div>
    jquery代码
    $("input").eq(1).click(function(){
    	$("div").fadeTo(1000,0.5);
    })
    

    自定义

    animate(用于创建自定义动画的函数。)

    html代码
    	span{
    	 	background: red;
    	 	opacity:0;
    	 	position: absolute;
    	 }
    css代码
    	<span>123</span>
    jquery代码
    $("span").animate({
    	"width":"300px",
    	"opacity":"1",
    	"font-size":"3em",
    	"height":"100px",
    	"left":"300px",
    	"top":"100px"
    },3000,function(){
    
    	console.log("动画完成")
    })
  • 相关阅读:
    【Netty学习】 ChannelInitializer 学习
    【Netty学习】Netty 4.0.x版本和Flex 4.6配合
    Spring框架学习
    【JS教程23】jquery链式调用
    【JS教程22】jquery特殊效果
    【JS教程21】数组及操作方法
    【JS教程20】jquery动画
    【JS教程19】jquery绑定click事件
    【JS教程18】jquery样式操作
    【JS教程17】jquery选择器
  • 原文地址:https://www.cnblogs.com/WWWrs/p/6869435.html
Copyright © 2011-2022 走看看