jquery之效果操作

jQuery操作之效果

效果一共分五大类

一.基本

二.滑动

三.淡入淡出

四.自定义

五.设置

咱们先来看一下基本类

一.基本又分为

show()

hide()

toggle()

html代码

<div></div>
<p>123</p>
<input type="button" id="btn" value="显示">
<input type="button" id="btn1" value="隐藏">
<input type="button" id="btn2" value="切换">

css代码

div{
	 width: 100px;
	 height: 100px;
	 background: red;
	 display: none;
  }

jquery代码

   $("#btn").click(function(){
	    //显示div 3秒执行完
        $("div").show(3000);
    })

    $("#btn1").click(function(){
	    //隐藏div 3秒执行完
	     $("div").hide(3000);
    })
    
	$("#btn2").click(function(){
	    
		//切换显示隐藏div 2秒执行完
		$("div").toggle(2000);
    })

效果如下图

二.滑动又分为

show()

hide()

toggle()

html和css代码都一样

jquery代码

    $("#btn").click(function(){
	    //展开div 
        $("div").slideDown();
    })

    $("#btn1").click(function(){
	    //收缩div 
	     $("div").slideUp();
    })
    
	$("#btn2").click(function(){
	    
		//切换展开收缩div 
		$("div").slideToggle();
    })

效果图

三.淡入淡出又分为

fadeIn()

fadeOut()

fadeTo()

fadeToggle

css代码

     div{
		 width: 200px;
		 height: 400px;
		 background: red;
		 display: none;
		 position:absolute;
		 top:0;
		 left:0;
	 }
      input{
	    margin-top:420px;
	 }

jquery代码

    $("#btn").click(function(){
	    //渐渐淡入
        $("div").fadeIn(2000);
		//两秒以后开始执行动画
		$("div").fadeTo("slow",2000);
    })

   /$("#btn1").click(function(){
	    //渐渐淡出
	     $("div").fadeOut(2000);
    })
    
	$("#btn2").click(function(){
	    
		//切换淡入淡出div 
		$("div").fadeToggle(2000);
    })

效果图

四.自定义(这个效果是最常用的一个效果，各种效果都能实现)

animate()

stop()

delay()

css代码

     div{
		 width: 200px;
		 height: 400px;
		 background: red;
		 position:absolute;
		 top:0;
		 left:0;
	 }
      input{
	    margin-left:700px;
	 }

jquery代码

    $("#btn").click(function(){
	   //设置动画效果
	   $("div").animate({
	      "width":"400px",
		  "height":"600px",
		  "left":"100px"
		},2000)  
	})
	$("#btn1").click(function(){
	   //终止进行中的动画效果
	   $("div").stop().animate()
	   })
	$("#btn2").click(function(){
	   //延时动画效果
	   $("div").delay(500).animate({
	       "width":"400px",
		  "height":"600px",
		  "left":"100px"
	   },2000)
	 })  

效果图

五.设置

$.fx.off()

$.fx.interval()//相当于定时器

jquery代码

 //暂停一切动画效果
 $.fx.off=true;
	$("#btn").click(function(){
	   //设置动画效果
	   $("div").animate({
	      "width":"400px",
		  "height":"600px",
		  "left":"100px"
		},2000)  
	})