-
jQuery 效果
jQuery给我们封装了很多动画效果,常见如下:
显示隐藏:1.show() 2.hide() 3.toggle()
滑动: 1.slideDown() 2.slideUp() 3.slideToggle()
淡入淡出:1.fadeIn() 2.fadeOut() 3.fadeToggle() 4.fadeTo()
自定义动画:animate()
-
显示隐藏效果
显示和隐藏语法规范
show([speed,[easing],[fn]]);//显示
hide([speed,[easing],[fn]]);//隐藏
toggle([speed,[easing],[fn]]);//切换,显示时候点一下隐藏,隐藏时候点一下显示
显示参数(三个都一样)
-
参数都可以省略,无动画效果直接显示/隐藏
-
speed:三种速度字符串('slow','normal',fast)或者表示动画时长的毫秒数值(如:1000)
-
easing:(Optional)用来指定切换效果,默认是"swing",可以是参数’linear‘(先快后慢,匀速等等)
-
fn:回调函数,在动画完成时执行的函数,每个元素执行一次
$('button').eq(0).click(function () {
$('div').show(1000, function () {
alert('我显示啦!!!')
})
});
$('button').eq(1).click(function () {
$('div').hide(1000, function () {
alert('我隐藏啦!!!')
})
});
$('button').eq(2).click(function () {
$('div').toggle(1000, function () {
alert("我可以反复横跳")
})
})
-
滑动效果
1.下滑效果语法规范
slideDown([speed,[easing],[fn]]);//下拉
slideUP([speed,[easing],[fn]]);//上拉
slideToggle([speed,[easing],[fn]]);//切换
2.显示参数(三个都一样)
-
参数都可以省略,
-
speed:三种速度字符串('slow','normal',fast)或者表示动画时长的毫秒数值(如:1000)
-
easing:(Optional)用来指定切换效果,默认是"swing",可以是参数’linear‘(先快后慢,匀速等等)
-
fn:回调函数,在动画完成时执行的函数,每个元素执行一次
-
事件切换
hover([over],out);//
-
over:鼠标移到元素上要触发的函数(相当于mouseenter)
-
out:鼠标移出元素上要触发的函数(相当于mouseleave)
// 事件切换hover就是鼠标经过和离开的复合写法
$('.nav>li').hover(function () {
$(this).children('ul').slideDown(200);//鼠标过去拉下来
}, function () {
$(this).children('ul').slideUp(300);//鼠标离开拉回去
})
// 如果只写一个函数,那么鼠标经过和鼠标离开都会触发这个函数
$('.nav>li').hover(function () {
$(this).children('ul').stop().slideToggle();//触发一个切换就有两个效果
})
-
stop()动画队列及其停止排队方法