jQuery的动画效果

jQuery的动画效果

一、show()方法和hide()方法

1.show()与hide()
show()：根据hide()方法记住的display属性值来显示元素。
hide() : 将该元素的display样式改为 “none”，用来隐藏元素

2.参数让元素动起来：
单纯的调用show()和hide()相当于css(“display”,“none/block/inline”),不会有任何动画。如果希望调用元素慢慢显示/消失，则可以为show()/hide()方法指定一个速度参数.
参数：slow,normal,fast,数值（以毫秒为单位）

$("element").show("slow");     //元素将缓慢的显示出来
$("element").show("normal");   //元素将默认速度显示出来
$("element").show("fast");     //元素将迅速的显示出来
$("element").hide("1000");     //元素将在1000毫秒(1秒)内慢慢地隐藏

注：对元素使用带参数的show()和hide()是从：高度，宽度，不透明度 三个属性同时进行操作的。

二、fadeIn()方法和fadeOut()方法

fadeIn()/fadeOut() 只改变元素的不透明度。
fadeOut() 淡出：会在指定的一段时间内降低元素的不透明度，直到元素完全消失(“display:none”)。
fadeIn() 淡入：与fadeOut()完全相反。
fadeTo();淡入到
fadeToggle():淡入与淡出
例：

$("#panel h5.head").toggle(function(){
     $(this).next("div.content").fadeOut();
},function(){
     $(this).next("div.content").fadeIn();
});

三、slideUp()方法和slideDown()方法

slideUp()/slideDown()只改变元素的高度。
slideDown()滑入：如果一个元素的display属性值为"none"，当调用slideDown()时，这个元素将由上至下延伸显示。
slideUp() 滑出：与slideDown()完全相反。
slideToggle():滑入与滑出
例：

$("#panel h5.head").toggle(function(){
     $(this).next("div.content").slideUp();
},function(){
     $(this).next("div.content").slideDown();
});

jQuery animate() 方法用于创建自定义动画

语法：$(selector).animate({params},speed,callback);
params 参数是必须存在的，它定义形成动画的 CSS 属性。
比如{元素1: “value1”, 元素2: “value2”, ····· }
speed : 速度参数，可选。
callback : 在动画完成时执行的函数，可选。

<script> 
$(function(){//加载完成时
  $("button").click(function(){//鼠标点击事件
    $("div").animate({//动画
      left:'250px',//距离左边250像素点
      opacity:'0.5',//透明度为0.5
      height:'150px',//设置大小
      width:'150px'
    });
  });
});
</script>