jQuery效果之隐藏与显示、淡入淡出、滑动、回调

• jQuery 隐藏与显示
• jQuery 淡入淡出
• jQuery 滑动
• jQuery 动画
• jQuery 停止动画
• jQuery Callback
• jQuery Chaining

jQuery 隐藏与显示

两个简单的很炫效果：

隐藏与显示动画1.gif

代码：

你好吗
  隐藏
  显示
  隐藏/显示

$(document).ready(function () {
   $("#hide").click(function () {
       $("p").hide(1000);
   }) ;
   $("#show").click(function () {
       $("p").show(1000);//1000毫秒
   }) ;
   $("#toggle").click(function () {
       $("p").toggle(1000);//同时控制显示与隐藏
   }) ;
});

隐藏与显示动画2.gif

代码：

  
你好吗
 -->

jQuery 淡入淡出

首先看效果图：

淡入淡出效果.gif

    
    
    
    


    淡入
    淡出
    淡入/淡出
    fadeto
    

    

    

/**
 * Created by chuanglong02 on 17/1/24.
 */
$(document).ready(function () {
    $("#in").click(function () {
       $("#div1").fadeIn(1000);
       $("#div2").fadeIn(1000);
       $("#div3").fadeIn(1000);
    });
    $("#out").click(function () {
       $("#div1").fadeOut(1000);
       $("#div2").fadeOut(1000);
       $("#div3").fadeOut(1000);
    });
    $("#toggle").click(function () {
       $("#div1").fadeToggle(1000);
       $("#div2").fadeToggle(1000);
       $("#div3").fadeToggle(1000);
    });
    $("#to").click(function () {
       $("#div1").fadeTo(1000,1);
       $("#div2").fadeTo(1000,0.75);
       $("#div3").fadeTo(1000,0.3);//设置透明度
    });

});

jQuery 滑动 ,和上面显示隐藏是一样的

效果图：

滑动显示与隐藏.gif

代码：

    
    
    
    
    


    
显示
    
隐藏
    
显示/隐藏
    
helloword

$(document).ready(function () {
   $("#flipshow").click(function () {
       $("#content").slideDown(1000);
   });
   $("#fliphide").click(function () {
       $("#content").slideUp(1000);
   });
   $("#flip").click(function () {
       $("#content").slideToggle(1000);
   });
});

回调 callback

动画在结束后都有个回调，可以执行一个或者多个方法:
效果图：

动画回调.gif

    
    
    
    


    隐藏
    
hello Worldhello Worldhello World

$(document).ready(function () {
  $("button").click(function () {
      $("p").hide(1000,function () {
          // $("p").show(); //回调 ，动画执行之后的回调
          $("p").css("color","red").slideUp(1000).slideDown(1000);
      });
  });
});