$("#hide").click(function () {
$("p").hide();
});
$("#show").click(function () {
$("p").show();
});
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
// 该实例演示了带有 speed 参数的 hide() 方法
$("button").click(function () {
$("p").hide(3000);
});
// 该实例演示了带有 speed 参数的 hide() 方法,并使用回调函数
$(document).ready(function () {
$("hidebtn").click(function () {
$("div").hide(1000,"linear",function () {
alert("hide() 方法已完成!");
});
}) ;
});
通过 jQuery,您可以使用 toggle() 方法来切换 hide() 和 show() 方法
显示被隐藏的元素,并隐藏已显示的元素
语法
$(seelector).toggle(speed,callback);
$("button").click(function(){
$("p").toggle(1000);
});
jQuery fadeIn() 用于淡入已隐藏的元素
语法
$(selector).fadeIn(speed,callback);
$("button").click(function () {
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
jQuery fadeOut() 用于淡入出可见的元素
语法
$(selector).fadeOut(speed,callback);
$("button").click(function () {
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换
如果元素已淡出,则 fadeToggle() 会向元素添加淡入效果
如果元素已淡入,则 fadeToggle() 会向元素添加淡出效果
语法
$(selector).fadeToggle(speed,callback);
$("button").click(function () {
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
jQuery fadeTo() 方法允许渐变为给定的不透明度(值介于 0 与 1 之间)
语法
$(selector).fadeTo(speed,opacity,callback);
$("button").click(function () {
$("#div1").fadeTo("slow",0.12);
$("#div2").fadeTo("slow",0.5);
$("#div3").fadeTo("fast",0.85);
});
$(selector).slideDown(speed,callback);
$("#flip").click(function(){
$("#panel").slideDown();
});
$(selector). slideUp(speed,callback);
$("#flip").click(function(){
$("#panel"). slideUp();
});
$(selector).slideToggle(speed,callback);
$("#flip").click(function(){
$("#panel").slideToggle();
});
$(selector).animate({params},speed,callback);
// 例子演示 animate() 方法的简单应用。它把 <div> 元素往右边移动了 250 像素
$("button").click(function(){
$("div").animate({left:'250px'});
});
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});
$("button").click(function(){
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");
});
$("button").click(function(){
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});
$(selector).stop(stopAll,goToEnd);
$("#stop").click(function(){
$("#panel").stop();
});
// 以下实例在隐藏效果完全实现后回调函数
$("button").click(function () {
$("p").hide("slow",function () {
alert("段落现在被隐藏了...");
}) ;
});
// 以下实例没有回调函数,警告框会在隐藏效果完成前弹出
$("button").click(function () {
$("p").hide("slow");
alert("段落现在被隐藏了...");
});
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
$("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000);