jQuery 动画

动画隐藏和显示

hide 

$(selector).hide(speed,callback)//隐藏

 

$(selector).show(speed,callback)//显示

 speed参数有:slow fas normal milliseconds

例子：

$(function(){
 $("button").click(function(){
 
    $("p").hide(1000,function(){
    
        $("p").show(1000);
    
    })
 
 
 })



})

 
切换与滑动
$(select).toggle(speed,callback); //切换功能
toggle() 函数使用 show() 或 hide() 函数来切换 HTML 元素，同一个按钮可以点击
两次，实现隐藏和显示的效果，其实某些特定用途可以代替他们

$(selector).slideDown(speed,callback); // 向下滑动 并显示遮挡

 

$(selector).slideUp(speed,callback);//    向上滑动 ，并隐藏遮挡

 

$(selector).slideToggle(speed,callback);// 上下滑动 ，实现切换

例子

$(document).ready(function(){
  $(".flip").click(function(){
    $(".panel").slideToggle("slow");
  });
});

html 代码
<div class="panel">
<p>啦啦啦啦</p>
<p>123456</p>
</div>
 
<p class="flip">点下试试</p>

fadeOut在指定的一段时间内降低元素的不透明度,直到元素完全消失fadeIn则相反

$(selector). fadeOut(speed,callback)    //变淡至空

 

$(selector). fadeIn(speed,callback)    //变亮至全部

 

$(selector). fadeTo(speed,opacity,callback) //变淡至指定效果   opacity亮度直用0.0 ~ 1.0之间

 

$(selector).animate({params},duration,easing,callback)  //动画

 
params: 变化后的CSS效果，如：{height:300}
duration:变化速度用毫秒
easing:变化效果的名称（