hide和show 同样有 fadeInhe fadeOut 的功能
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide(2000);
});
$("#show").click(function(){
$("p").show(2000);
});
});
toggle 隐藏显示自动切换 同样后面可以跟时间 做到 fadeToggle 的效果
$(document).ready(function(){
$("button").click(function(){
$("p").toggle(1000);
});
});
淡入淡出:
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
});
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
});
fadeToggle 淡入淡出自动切换
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
});
slideToggle 滑动效果 自动切换 做到slideDown() 与 slideUp() 方法之间进行切换。
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideToggle("slow");
});
});
animate 动画效果:
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
});
设置元素 不断的增加范围
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
});
队列功能
$("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");
});
元素移动到右边,然后增加文本的字号
$(document).ready(function(){
$("button").click(function(){
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});
});
callback 执行效果后回调:
$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});