动画效果是jQuery吸引人的地方之一。通过jQuery的动画方法,能够轻松地为网页添加视觉效果,给用户一种全新的体验。jQuery动画是一个大的系列,本文将详细介绍jQuery的三种常见动画效果——显隐效果、高度变化及淡入淡出!
1、基本效果(显示与隐藏)
1)show() :显示
2)show(speed,[callback]) :以动画效果显示
3)hide() :隐藏
4)hide(speed,[callback]) :以动画效果隐藏
5)toggle() :切换显示或隐藏
6)toggle(switch) :显示或隐藏,如果switch为true代表显示,false隐藏(了解)
7)toggle(speed,[callback]) :以动画效果显示或隐藏
参数说明:
speed:动画的速度,可以是"slow"(缓慢), “normal”(正常), “fast”(快速)
也可以理解为动画的持续时间,单位为毫秒。
[callback]:动画完成时所触发的回调函数
<div id="box">
<img src="img/1.jpg" alt="">
</div>
<button type="button" id="hide">隐藏图片</button>
<button type="button" id="show">显示图片</button>
<button type="button" id="tog">隐藏/显示图片</button>
</body>
<script src="js/jquery.js"></script>
<script>
//基本特效 改变了宽高 透明度
$('#hide').click(function(){
$('#box').hide(4000,function(){
alert("我老婆");
});
})
$('#show').click(function(){
$('#box').show(4000,function(){
alert("我老婆");
});
})
//切换 隐藏和显示中切换
$('#tog').click(function(){
$('#box').toggle(4000,function(){
// alert("我老婆");
});
})
</script>
2、滑动效果(上下滑动)
• slideDown(speed,[callback]) :以动画效果向下滑动
• slideUp(speed,[callback]) :以动画效果向上滑动
• slideToggle(speed,[callback]) :以动画效果滑动
参数说明:
speed:动画的持续时间,单位为毫秒
[callback]:动画完成时所触发的回调函数
3、淡入淡出效果
• fadeIn(speed,[callback]) :以动画效果淡入
• fadeOut(speed,[callback]) :以动画效果淡出
• fadeTo(speed,opacity,[callback]) :设置元素的透明度 0(全透明)-1(不透明)之间
参数说明:
speed:动画的持续时间
opacity:元素的透明度,0(全透明)1(不透明)
<div id="box">
<img src="img/1.jpg" alt="">
</div>
<button type="button" id="hide">隐藏图片</button>
<button type="button" id="show">显示图片</button>
<button type="button" id="tog">隐藏/显示图片</button>
</body>
<script src="js/jquery.js"></script>
<script>
//渐变特效
//渐变隐藏
$('#hide').click(function(){
$('#box').fadeOut(4000,function(){
alert("我老婆");
});
})
$('#show').click(function(){
$('#box').fadeIn(4000,function(){
alert("我老婆");
});
})
//切换 隐藏和显示中切换
$('#tog').click(function(){
$('#box').fadeToggle(4000,function(){
// alert("我老婆");
});
})
</script>
效果 :opacity:元素的透明度,0(全透明)1(不透明) (淡入淡出)
4、自定义动画效果
animate(params,[speed], [fn]) :创建自定义动画
参数说明:
params:json对象,动画参数
[speed]:动画的持续时间
[fn]:动画完成时所触发的回调函数
<div id="box">
<img src="img/1.jpg" alt="">
</div>
<button type="button" id="hide">隐藏图片</button>
<button type="button" id="show">显示图片</button>
<button type="button" id="tog">自定义效果</button>
</body>
<script src="js/jquery.js"></script>
<script>
//自定义特效
$('#tog').click(function(){
$('#box').animate({
'width':200,
'left':'+=50',
'height':'toggle',
'border':'1px solid red',
},10000)
})
360开机动画!!!