jQuery动画效果

jQuery的动画函数主要分为三类:
基本动画函数: 既有透明度渐变, 又有滑动效果. 是最常用的动画效果函数.

//元素会按左上角的点进行慢慢的显示，显示的时候进行的步骤就是宽高和透明度在规定的秒数里面显示完成
$().show([speed,[easing],[fn]])
//speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值
//easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
//fn:在动画完成时执行的函数，每个元素执行一次。
//如果选择的元素是可见的，这个方法将不会改变任何东西。无论这个元素是通过hide()方法隐藏的还是在CSS里设置了display:none;，这个方法都将有效。
$().hide([speed,[easing],[fn]])
//参数同上，

滑动动画函数: 仅使用滑动渐变效果.

$().slideDown([speed],[easing],[fn])
//通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式显示出来。
$().slideUp([speed,[easing],[fn]])
//通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。
$().slideToggle([speed],[easing],[fn])
//这个就是前面两个的集合，如果元素是隐藏的就显示，如果元素是显示的就隐藏

淡入淡出动画函数: 仅使用透明度渐变效果.

$().fadeIn([speed],[easing],[fn])
//通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。
//这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
$().fadeOut([speed],[easing],[fn])
//通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。
$().fadeToggle([speed,[easing],[fn]])
//这个就是前面两个的集合，如果元素是隐藏的就显示，如果元素是显示的就隐藏
$().fadeTo([[speed],opacity,[easing],[fn]])
//这个就是和上面三个不一样，他多了一个参数，上面三个是透明度不是1就是0，而这个第二个参数是可以写你想让这个元素透明度是几他就到几的位置

下面是这三大类的方法的一个案例

	<div class="demo"></div>
<button>隐藏</button>
<button>显示</button><br>
<button>滑动隐藏</button>
<button>滑动显示</button>
<button>滑动显示/滑动隐藏</button><br>
<button>淡入</button>
<button>淡出</button>
<button>淡入淡出</button>

.demo{
width: 400px;
height: 400px;
background-color: red;
}
button{
margin-top: 10px;
}

$('button').eq(0).on('click',function(){
$('.demo').hide(4000);
});
$('button').eq(1).on('click',function(){
$('.demo').show(4000);
});
$('button').eq(2).on('click',function(){
$('.demo').slideUp(4000);
});
$('button').eq(3).on('click',function(){
$('.demo').slideDown(4000);
});
$('button').eq(4).on('click',function(){
$('.demo').slideToggle(4000);
});
$('button').eq(5).on('click',function(){
$('.demo').fadeIn(4000);
});
$('button').eq(6).on('click',function(){
$('.demo').fadeOut(4000);
});
$('button').eq(7).on('click',function(){
$('.demo').fadeToggle(4000);
});

另外也许上面的三类函数效果都不是我们想要的, 那么jQuery也提供了自定义动画函数, 将控制权放在我们手里让我们自己定义动画效果.

$(selector).animate({params},speed,[callback])
//其中，params参数为制作动画效果的CSS属性名与值，speed参数为动画的效果的速度，单位为毫秒，callback是一个回调函数，动画执行完后执行的函数
$(selector).stop()
///停止当前动画，进行下一个动画
$(selector).stop(true)
//停止所有动画
$(selector).stop(true,true)
//停止当前动画，并达到当前动画的目标点
$(selector).finish();
//直接到达目标点
jQuery.fx.off = true
//jQuery中提供的动画的开关

	<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>

$('#tog').click(function(){
$('#box').animate({
'width':200,
'left':'+=50',
'height':'toggle',
'border':'1px solid red',
},10000,function(){
console.log('你好')
}
)

最后

以上就是要减肥盼望为你收集整理的jQuery动画效果的全部内容，希望文章能够帮你解决jQuery动画效果所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。