jQuery学习笔记（3.0）

滑动效果

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)

})})