jQuery慢慢啃之特效（八）

1.show([speed,[easing],[fn]])\\显示隐藏的匹配元素

//speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)

//easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"

$("p").show()

$("p").show("slow");

$("p").show("fast",function(){   $(this).text("Animation Done!"); });

$("p").show(4000,function(){   $(this).text("Animation Done..."); });

2.hide([speed,[easing],[fn]])//隐藏显示的元素
//speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
//easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"

$("p").hide()

$("p").hide("slow");

$("p").hide("fast",function(){   alert("Animation Done."); });

3.slideDown([speed],[easing],[fn])//通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数

$(".btn2").click(function(){  $("p").slideDown();});

$("p").slideDown("slow");

$("p").slideDown("fast",function(){   alert("Animation Done."); });

4.slideUp([speed,[easing],[fn]])//通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。

$("p").slideUp("slow");

$("p").slideUp("fast",function(){   alert("Animation Done."); });

5.slideToggle([speed],[easing],[fn])//通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数

$("p").slideToggle("slow");

$("p").slideToggle("fast",function(){   alert("Animation Done."); });

6.fadeIn([speed],[easing],[fn])//通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数

$("p").fadeIn("slow");

("p").fadeIn("fast",function(){   alert("Animation Done."); });

7.fadeOut([speed],[easing],[fn])//通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。

$("p").fadeOut("slow");

$("p").fadeOut("fast",function(){   alert("Animation Done."); });


8.fadeTo([[speed],opacity,[easing],[fn]])//把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。

$("p").fadeTo("slow", 0.66);

$("p").fadeTo("fast", 0.25, function(){   alert("Animation Done."); });

9.fadeToggle([speed,[easing],[fn]])//通过不透明度的变化来开关所有匹配元素的淡入和淡出效果，并在动画完成后可选地触发一个回调函数。

$("p").fadeToggle("slow","linear");

$("p").fadeToggle("fast",function(){   alert("Animation Done."); });

10.animate(params,[speed],[easing],[fn])//用于创建自定义动画的函数。
//注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left.

$("#go").click(function(){  $("#block").animate(
{ 
    width: "90%",
    height: "100%", 
    fontSize: "10em", 
    borderWidth: 10
  }, 1000 );});

$("#right").click(function(){  $(".block").animate({left: ‘+50px‘}, "slow");});

$("#left").click(function(){  $(".block").animate({left: ‘-50px‘}, "slow");});

$("p").animate({   left: 50, opacity: ‘show‘ }, 500);

$("p").animate({   opacity: ‘show‘ }, "slow", "easein");

11.stop([clearQueue],[jumpToEnd])//停止所有在指定元素上正在运行的动画。

[clearQueue],[gotoEnd]Boolean,BooleanV1.2

clearQueue:如果设置成true，则清空队列。可以立即结束动画。

gotoEnd:让当前正在执行的动画立即完成，并且重设show和hide的原始样式，调用回调函数等。

[queue],[clearQueue],[jumpToEnd]BooleanV1.7

queue:用来停止动画的队列名称

clearQueue:如果设置成true，则清空队列。可以立即结束动画。

jumpToEnd:如果设置成true，则完成队列。可以立即完成动画。

$("#stop").click(function(){  $("#box").stop();});

// 开始动画
$("#go").click(function(){  $(".block").animate({left: ‘+200px‘}, 5000);});

// 当点击按钮后停止动画
$("#stop").click(function(){  $(".block").stop();});

11.delay(duration,[queueName])//设置一个延时来推迟执行队列中之后的项目。

$(‘#foo‘).slideUp(300).delay(800).fadeIn(400);


12.finish( [queue ] )//停止当前正在运行的动画，删除所有排队的动画，并完成匹配元素所有的动画。

$("#complete").click(function(){  $("div").finish();});

13.jQuery.fx.off//关闭页面上所有的动画。

  jQuery.fx.off = true;
  $("input").click(function(){ $("div").toggle("slow");  });

14.jQuery.fx.interval//设置动画的显示帧速

jQuery.fx.interval = 100;

$("input").click(function(){  $("div").toggle( 3000 );});