一、基础特效
- .hide():隐藏匹配的元素。
- .show():显示匹配的元素。
- .toggle():显示或隐藏匹配元素。
<button class="hide">hide</button>
<button class="show">show</button>
<button class="toggle">toggle</button>
<div></div>
<script src="js/jQuery1.12.4.js"></script>
<script>
$('.hide').click(function(){
$('div').hide(1000,function(){
console.log("隐藏完毕");
});
});
$('.show').click(function(){
$('div').show(1000,function(){
console.log('显示完毕');
});
});
var n = 0;
$('.toggle').click(function(){
$('div').toggle(1000,function(){
var reg = n++ % 2;
if(reg == 0){
console.log('隐藏完毕',n);
}else{
console.log("显示完毕",n);
};
});
});
</script>
二、滑动特效
- .slideDown():用滑动动画显示一个匹配元素。
- .slideToggle():用滑动动画显示或隐藏一个匹配元素。
- .slideUp():用滑动动画隐藏一个匹配元素。
<button class="slideUp">slideUp</button>
<button class="slideDown">slideDown</button>
<button class="slideToggle">slideToggle</button>
<div></div>
<script src="js/jQuery1.12.4.js"></script>
<script>
$('.slideUp').click(function(){
$('div').slideUp(1000,function(){
console.log("隐藏完毕");
});
});
$('.slideDown').click(function(){
$('div').slideDown(1000,function(){
console.log('显示完毕');
});
});
var n = 0;
$('.slideToggle').click(function(){
$('div').slideToggle(1000,function(){
var reg = n++ % 2;
if(reg == 0){
console.log('隐藏完毕',n);
}else{
console.log("显示完毕",n);
};
});
});
</script>
三、渐变特效
- .fadeIn():通过淡入的方式显示匹配元素。
- .fadeOut():通过淡出的方式隐藏匹配元素。
- .fadeTo():调整匹配元素的透明度。
- .fadeToggle():通过匹配的元素的不透明度动画,来显示或隐藏它们。
<button class="fadeOut">fadeOut</button>
<button class="fadeIn">fadeIn</button>
<button class="fadeTo">fadeTo</button>
<button class="fadeToggle">fadeToggle</button>
<div></div>
<script src="js/jQuery1.12.4.js"></script>
<script>
$('.fadeOut').click(function(){
$('div').fadeOut(1000,function(){
console.log("隐藏完毕");
});
});
$('.fadeIn').click(function(){
$('div').fadeIn(1000,function(){
console.log('显示完毕');
});
});
$('.fadeTo').click(function(){
$('div').fadeTo('normal',0.5,function(){
console.log('显示完毕');
});
});
var n = 0;
$('.fadeToggle').click(function(){
$('div').fadeToggle(1000,function(){
var reg = n++ % 2;
if(reg == 0){
console.log('隐藏完毕',n);
}else{
console.log("显示完毕",n);
};
});
});
</script>
三、自定义特效
- .animate():根据一组 CSS 属性,执行自定义动画。
- .delay():设置一个延时来推迟执行队列中后续的项。
- .finish():停止当前正在运行的动画,删除所有排队的动画,并完成匹配元素所有的动画。
- .stop():停止匹配元素当前正在运行的动画。
$('.animate').click(function(){
$('div').animate({width:500},4000)
.animate({height:500},'normal')
.delay(1000)
.animate({opacity:0.5},'normal')
});
$('div').click(function(){
$('div').finish();
});