show()html
显示隐藏的匹配元素。ide
这个就是 'show( speed, [callback] )' 无动画的版本。若是选择的元素是可见的,这个方法将不会改变任何东西。不管这个元素是经过hide()方法隐藏的仍是在CSS里设置了display:none;,这个方法都将有效。函数
$("p").show()
$("p").show("slow");
$("p").show(4000,function(){ $(this).text("Animation Done..."); });
hide()
隐藏显示的元素学习
这个就是 'hide( speed, [callback] )' 的无动画版。若是选择的元素是隐藏的,这个方法将不会改变任何东西。动画
toggle()
用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的 click 事件。this
若是元素是可见的,切换为隐藏的;若是元素是隐藏的,切换为可见的。spa
speed: 隐藏/显示 效果的速度。默认是 "0"毫秒。可能的值:slow,normal,fast。"code
fn:在动画完成时执行的函数,每一个元素执行一次。orm
speed: 隐藏/显示 效果的速度。默认是 "0"毫秒。可能的值:slow,normal,fast。"htm
easing:(Optional) 用来指定切换效果,默认是"swing",可用参数"linear"
fn:在动画完成时执行的函数,每一个元素执行一次。
用于肯定显示/隐藏的开关。如:true - 显示元素,false - 隐藏元素
$('td).toggle();
$("td").toggle( function () { $(this).addClass("selected"); }, function () { $(this).removeClass("selected"); } );
$("p").toggle("slow");
slideDown()
经过高度变化(向下增大)来动态地显示全部匹配的元素,在显示完成后可选地触发一个回调函数。
这个动画效果只调整元素的高度,可使匹配的元素以“滑动”的方式显示出来。
以滑动方式显示隐藏的 <p> 元素:
$(".btn2").click(function(){ $("p").slideDown(); });
用600毫秒缓慢的将段落滑下
$("p").slideDown("slow");
用200毫秒快速将段落滑下,以后弹出一个对话框
$("p").slideDown("fast",function(){ alert("Animation Done."); });
slideUp()
slideToggle()
经过高度变化来切换全部匹配元素的可见性,并在切换完成后可选地触发一个回调函数。
这个动画效果只调整元素的高度,可使匹配的元素以“滑动”的方式隐藏或显示。
用600毫秒缓慢的将段落滑上或滑下
$("p").slideToggle("slow");
用200毫秒快速将段落滑上或滑下,以后弹出一个对话框
$("p").slideToggle("fast",function(){ alert("Animation Done."); });
fadeIn()
经过不透明度的变化来实现全部匹配元素的淡入效果,并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度,也就是说全部匹配的元素的高度和宽度不会发生变化。
$("p").fadeIn("slow");
("p").fadeIn("fast",function(){ alert("Animation Done."); });
fadeOut()
fadeTo()
把全部匹配元素的不透明度以渐进方式调整到指定的不透明度,并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度,也就是说全部匹配的元素的高度和宽度不会发生变化。
$(".btn2").click(function(){ $("p").fadeIn(); });
$("p").fadeTo("slow", 0.66);
fadeToggle()
经过不透明度的变化来开关全部匹配元素的淡入和淡出效果,并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度,也就是说全部匹配的元素的高度和宽度不会发生变化。
用600毫秒缓慢的将段落淡入
$("p").fadeToggle("slow","linear");
用200毫秒快速将段落淡入,以后弹出一个对话框
$("p").fadeToggle("fast",function(){ alert("Animation Done."); });
animate()
$(".btn1").click(function(){ $("#box").animate({height:"300px"}); }); $(".btn2").click(function(){ $("#box").animate({height:"100px"}); }); $("#go").click(function () { $("#block").animate({ width: "90%", height: "100%", fontSize: "10em", borderWidth: 10 }, 1000); });
$(".btn1").click(function(){
$("#box").animate({height:"300px"},8000).animate({width:"300px"});
});
$(".btn2").click(function(){
$("#box").animate({height:"100px"});
});
stop() 学习网址
http://www.cnblogs.com/vincent_ds/archive/2012/09/23/2699048.html
http://www.cnblogs.com/wenzichiqingwa/archive/2012/11/21/2780996.html
delay()
设置一个延时来推迟执行队列中以后的项目。
finish()$('#foo').slideUp(300).delay(800).fadeIn(400);
中止当前正在运行的动画,删除全部排队的动画,并完成匹配元素全部的动画。
当.finish()在一个元素上被调用,当即中止当前正在运行的动画和全部排队的动画(若是有的话),而且他们的CSS属性设置为它们的目标值(全部动画的目标值)。全部排队的动画将被删除。
若是第一个参数提供,该字符串表示的队列中的动画将被中止。
.finish()方法和.stop(true, true)很类似,.stop(true, true)将清除队列,而且目前的动画跳转到其最终值。可是,不一样的是,.finish() 会致使全部排队的动画的CSS属性跳转到他们的最终值。
$("#complete").click(function(){ $("div").finish();});