隐藏,显示
语法:
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
可选的speed参数可以取以下值:slow fast或毫秒数
可选的callback参数是完成后执行的函数名称
通过jQuery,你可以使用toggle函数来实现隐藏和显示的切换
语法:
$(selector).toggle(speed,callback);
淡入淡出
jQuery fadeIn()方法
用于淡入已隐藏的方法(display:none)
语法:
$(selector).fadeIn(speed,callback);
实例
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
jQuery fadeOut() 方法
jQuery fadeOut() 方法用于淡出可见元素。语法:
$(selector).fadeOut(speed,callback);
实例
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
jQuery fadeToggle() 方法
jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
如果元素已淡出,则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入,则 fadeToggle() 会向元素添加淡出效果。
语法:$(selector).fadeToggle(speed,callback);
实例
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
jQuery fadeTo()方法
jQuery fadeTo()方法允许渐变为给定的不透明度(0-1之间)
语法:
$(selector).fadeTo(speed,opacity,callback);
必须的speed参数规定效果的时长。
fadeTo()方法中必须的opacity参数将淡入淡出效果设置为给定的透明度(0-1之间)
实例
$("button").click(function(){
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
});
滑动
jQuery slideDown()
jQuery slideUp()
jQuery slideToggle()
jQuery slideDown()方法
jQuery slideDown()方法用于向下滑动元素。
语法:
$(selector).slideDown(speed,callback);
实例
$("#flip").click(function(){
$("#panel").slideDown();
});
jQuery slideUp()方法
语法:
$(selector).slideUp(speed,callback);
实例
$("#flip").click(function(){
$("#panel").slideUp();
});
jQuery slideToggle()方法
语法:
$(selector).slideToggle(speed,callback);
实例
$("#flip").click(function(){
$("#panel").slideToggle();
});
jQuery 停止动画
jQuery stop()方法用于在东华或效果完成前对它们进行停止。
语法
$(selector).stop(stopall,goToEnd);
可选的stopAll参数规定是否应该清楚动画队列。默认是false,既仅停止活动的动画,允许任何排入队列的动画向后执行。
可选的goToEnd参数规定是否立即完成当前动画。默认是false。
因此,默认的,stop()会清楚在被选元素上指定的当前动画。
实例
$("#stop").click(function(){
$("#panel").stop();
})
jQuery Callback函数
Callback函数在当前动画100%完成后执行。
典型的语法:
$(selector).hide(speed, callback)
callback参数是在hide操作完成后被执行的函数。
错误(没有callback)
$("p").hide(1000);
alert("The paragragh is now hidden");
正确(有callback)
$("p").hide(1000,function(){
alert("The parapragh is now hidden");
})
jQuery - Chaining
通过jQuery,你可以把动作/方法链接起来。这样的话,浏览器就不必多次查找相同元素。
例子1
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
例子2
这样写会好些
$("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000);
jQuery会抛掉多余的空格,并按照一行长代码来执行代码行。