jQuery动画效果
jQuery动画效果
1.显示动画
-
无参数,让指定的元素显现出来,底层通过display:block实现
-
$("div").show();
-
-
通过控制元素的宽高,透明度,display属性,逐渐显示,例如3秒后显示完毕
-
$('div').show(3000); -
参数
-
slow 慢:600ms
-
normal 正常 400ms
-
fast 快:200ms
-
-
动画执行完毕后立即执行回调函数
-
//show(毫秒值，回调函数;
$("div").show(5000,function () {
alert("动画执行完毕！");
);
-
-
2.隐藏动画
-
$(selector).hide();
$(selector).hide(1000);
$(selector).hide("slow");
$(selector).hide(1000, function(){});
3.开关式显示隐藏动画
-
$('#box').toggle(3000,function(){}); -
显示和隐藏的拉回切换采用的是toggle()方法,就是先执行show(),再执行hide()
-
$('#btn').click(function(){
$('#box').toggle(3000,function(){
$(this).text('盒子出来了');
if ($('#btn').text()=='隐藏') {
$('#btn').text('显示');
}else{
$('#btn').text('隐藏');
}
});
})
4.滑入和滑出
-
滑入,下拉动画,显示元素
-
$(selector).slideDown(speed, 回调函数);
-
-
滑出,上拉动画,隐藏元素
-
$(selector).slideUp(speed, 回调函数);
-
-
滑入滑出动画效果切换
-
$(selector).slideToggle(speed, 回调函数);
-
5.淡入淡出效果
-
淡入动画效果,
-
$(selector).fadeIn(speed, callback);
-
-
淡出动画效果
-
$(selector).fadeOut(1000);
-
-
淡入淡出动画效果来回切换
-
$(selector).fadeToggle('fast', callback);
-
6.自定义动画
-
$(selector).animate({params}, speed, callback); -
作用:执行一组CSS属性的自定义动画
-
第一个参数:要执行动画的CSS属性(必选)
-
第二个参数:执行动画的时长:可选
-
第三个动画:动画执行完毕后,立即执行的回调函数(可选)
-
7.停止动画
-
$(selector).stop(true, false); -
参数说明
-
第一个参数:true表示后续动画不执行,false表示后续动画执行
-
第二个参数:true表示立即执行完成当前动画,false表示立即停止当前动画
-
如果参数都不写,默认两个参数都是false,实际常用的是stop(),
-
