jQuery慢慢啃之特效（八）

时间：2021-11-29 03:31:21

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

相关文章