- 隐藏/显示
jQuery hide()和show():
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
// 也可以使用带参数的 $("p").show(2000);
jQuery toggle():
//用来切换hide()和show()方法,显示被隐藏的元素或隐藏已显示的元素。
$("button").click(function(){
$("p").toggle();
});
// 同样可以使用带参数的 $("p").toggle(2000);
- 淡入淡出
fadeIn()、fadeOut()、fadeToggle()、fadeTo()
$("button").click(function(){
// 淡入效果,可以带参数,淡入的时间(毫秒)
$("div1").fadeIn();
$("div2").dadeIn(1000);
// 淡出效果,带参数为淡出时间
$("div1").fadeOut();
$("div2").fadeOut(2000);
// fadeToggle()用于fadeIn()和fadeOut()之间切换
$("div1").fadeToggle();
$("div2").fadeToggle("slow");
// fadeTo()用于渐变为指定的不透明度(0-1之间)
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo(2000,0.4);
});
- 滑动
jQuery slideDown()、slideUp()、slideToggle()
$('button').click(function(){
// slideDown()用于向下滑动元素
$('p#in').slideDown('slow');
// slideUp()用于向上滑动元素
$('p#out').slideUp(3000);
// slideToggle()用于slideDown()和slideUp()之间切换
$("p#toggle").slideToggle();
});
- 动画
$(selector).animate({params},speed,callback);
params为比传,speed和callback可选
$('button').click(function(){
// 将一个<div>移动到左边
$('div').animate({left:'100px'});
// 也可以同时操作多个属性
$('div').animate({left:'200px', opacity:'0.4', height:'100px', width:'50px'});
// 或者相对属性值
$('div').animate({left:'200px', height:'+=100px', width:'+=50px'});
// 使用动画集合
var div=$('div');
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
- stop()
jQuery stop()方法用于停止正在之行的动画或效果。
$(selector).stop(stopAll,goToEnd);
stopAll为可选,是否清楚队列,默认为false,仅停止动画;
goToEnd为可选,是否立即完成当前动画,默认为false;
$(document).ready(function(){
$("#flip").click(function(){
$("p").slideDown(4000);
});
$("#stop").click(function(){
$("p").stop();
});
});
- Callback
在所有效果之行结束后都可以使用callback来之行其他动作,比如:
$("button").click(function(){
$("p").hide(1000,function(){
alert("<p>隐藏了");
});
});
- Chaining
跟其他语言一样,jQuery也可以对同一个元素之行多条命令,如:
//把<p>字体颜色变红,向上移动后再向下移动
$("p").css("color","red").slideUp(1000).slideDown(1000);