显示和隐藏show与hide
$("#hide").cilck(function(){
$("p").hide();
});
$("#show").cilck(function(){
$("p").show();
});
缓慢显示或者隐藏的时候可以做出动画效果；
$("button").click(function(){
$("p").hide(1000);
}); //这里的单位时‘毫秒’，可以取值fast和slow或者是毫秒。
$("button").click(function(){
$("p").toggle();
});
//点击隐藏，再点击显示。//同样可以控制速度
带有不同参数的fadeIn()方法也可以实现淡入隐藏。
$("button").click(function(){
$("div").fadeIn(/"slow"/1000);
});
淡出也是同理：fadeOut()
$("button").click(function(){
$("div").fadeOut(/"slow"/1000);
});
发生渐变给与透明度fadeTo()；其值介于0-1之间
$("button").click(function(){
$("div").fadeTo("slow",0.5);
});
显示与隐藏面板
下拉是slideDown()，上滑为slideUp()；一般我们要做就是显示和隐藏都做。
$("#flip").click(function(){
$("#panel").slideToggle();
});
//点击显示，再点击隐藏，可以无限循环
动画属性，
$("button").click(function(){
$("div").animate({left:'200px'});
});
除了left：‘200px'还可以继续添加需要的动画效果；用“，”分开，在同一个{}里
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
停止动画，jQuery stop()方法，在动画完成之前可以停止正在进行的动画效果。包括华东，淡入淡出和自定义动画。
$("#stop").click(function(){
$("#panel").stop();
});
//在函数执行完成后再弹出提示框
$("button").click(function(){
$("p").hide("slow",function(){
alert("段落现在被隐藏了");
});
});
//没有回调函数，警告框会在隐藏完成之前弹出
$("button").click(function(){
$("p").hide(1000);
alert("段落现在被隐藏了");
});
方法链接：$("#p1").css("color","red").slideUp(2000).slideDown(2000);
$(document).ready(function(){
$("button").click(function(){
$("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000);
});
});
网友评论