滑动效果
slideDown() //下拉
$("div").slideDown();
slideUp() //上拉
$("div").slideUp(); //里面可以加参数,就是速度毫秒数,如1000,一秒
$(".nav>li").mouseover(function(){ //鼠标经过下拉
$(this).children("ul").slideDown(200)
})
$(".nav>li").mouseover(function(){ //鼠标离开上拉
$(this).children("ul").slideUp(200)
})
hover([over,] out)
over:鼠标经过
out:鼠标离开
$(".nav>li").hover(function(){
$(this).children("ul").slideDown(200)
},function(){
$(this).children("ul").slideUp(200)
})
//改进代码
事件切换hover 如果只写一个函数,那么鼠标经过和离开都是执行同一个函数
$(".nav>li").hover(function(){
$(this).children("ul").slideToggle(200)
})
当多次触发动画时,就造成多个动画或者效果排队执行。
停止排队
stop()
//改进代码
$(".nav>li").hover(function(){
//stop方法必须写在动画的前面
$(this).children("ul").stop().slideToggle(200)
})
淡入淡出
fadeIn([speed],[easing],fn)
$(function(){
$("button").eq(0).click(function(){
$("div").fadeIn(1000)})
})
$("button").eq(1).click(function(){
$("div").fadeOut(1000)})
})
$("button").eq(2).click(function(){
$("div").fadeToggle(1000)})
})
渐进方式调整到指定的不透明度
fadeTo([speed].opacity,[easing],[fn])
opacity:透明度必须写,取值0-1之间。
speed也要写。
$("button").eq(3).click(function(){
$("div").fadeTo(1000,0.5)
})
高亮案例
当鼠标放在li上,兄弟的透明度降低。
使用fadeTo
$(function(){
$(".wrap li").hover(function(){
$(this).siblings().stop().fadeTo(400,0.5)},function(){
$(this).siblings().stop().fadeTo(400,1)
})
})
自定义动画animate
animate(params,[speed],[easing],[fn])
params:想要更改的样式属性,以对象形式传递,必须写。属性名可以不带引号,如果是符合属性需要采用驼峰命名。
$(function(){
$("button").click(function(){
$("div").animate({
left:200,
top:300,
opacity:.4
},500)
})})