jquery之效果操作

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)  
    })