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 );});











posted @ 2015-02-04 15:11  yu_liantao  阅读(275)  评论(0编辑  收藏  举报