来详细谈谈jquery可以实现的动画效果

前言：

       在这里我们来谈一谈有关jquery的动画属性。

 

 1、隐藏和显示：

$("p").hide();//让p元素消失，类似我们的display:none
$("p").show();//让p元素显示，类似我们的display:block
$("p").toggle();//如果他是显示，则让他隐藏，如果他是隐藏，则让他显示

2、淡入淡出：

$("p").fadeIn();//用于淡入已隐藏的元素
$("p").fadeOut();//用于淡出可见元素
$("p").fadeToggle();//fadeIn() 与 fadeOut() 方法之间进行切换

3、上下滑动：

$("p").slideDown() ;//向下滑动元素
$("p").slideUp();//向上滑动元素
$("p").slideToggle();//可以在 slideDown() 与 slideUp() 方法之间进行切换

4、动画：（用jq来实现我们css3的的动画效果）：

（1）、操作多个属性

//***当使用 animate() 时，用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，不能用-
$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
});

（2）、使用相对值：   需要在值的前面加上 += 或 -=：

$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
});

（3）、可以把属性的动画值设置为 "show"、"hide" 或 "toggle"：

$("button").click(function(){
  $("div").animate({
    height:'toggle'
  });
});

（4）、使用队列功能

$("button").click(function(){
  var div=$("div");
  div.animate({left:'100px'},"slow");
  div.animate({fontSize:'3em'},"slow");
});

5、停止动画  stop() 

$("#stop").click(function(){
  $("#panel").stop();   // 把 $("#panel")  的动画效果停止
});