jquery_各类动画效果的实现

^^^^^^^^^^^^^^^^^^^^
一、隐藏    显示
^^^^^^^^^^^^^^^^^^^^

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

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

speed 参数有：slow  fast normal  milliseconds

callback ：更多的方法或功能



例子：

$(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);// 上下滑动 ，实现切换


js代码
<script type="text/javascript">
$(document).ready(function(){
  $(".flip").click(function(){
    $(".panel").slideToggle("slow");
  });
});
</script>

html 代码
<div class="panel">
<p>PHP100视频教程 jquery课程效果</p>
<p>具体代码来源于w3c参考代码</p>
</div>
 
<p class="flip">点下试试</p>


^^^^^^^^^^^^^^^^^^^^^^^
切换与滑动
^^^^^^^^^^^^^^^^^^^^^^^

$(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:变化效果的名称（需要插件）