“我正在参加「掘金·启航计划」”
jQuery动画效果
显示隐藏:show(),hide(),toggle()
滑动:slideDown(),slideUp(),slideToggle()
深入浅出:fadeIn(),fadeOut(),fadeToggle(),fadeTo()
看下面的案例
<button>显示</button>
<button>隐藏</button>
<button>切换</button>
<div></div>
<script>
$(function(){
$("button").eq(1).click(function(){
$("div").hide()
});
$("button").eq(2).click(function(){
$("div").hide(1000,function(){
alert(5);
})
})
})
</script>
例如切换语法举例子
toggle([speed，[easing],[fn]])
1.参数都可以省略，无动画直接显示
2.speed:三种预定之一的字符串("slow"，"normal"，"fast")或者动画时长的毫秒数值
3.easing:(Optional)用来指定切换效果，默认是"swing"
4.fn:回调函数，动画完成后执行的元素
滑动效果和事件切换
<button>下拉滑动</button>
<button>下拉滑动</button>
<button>下拉滑动</button>
<div></div>
<script>
$(function(){
$("button").eq(0).click(function(){
// 下滑动slideDown()
$("div").slideDown();
})
$("button").eq(1).click(function(){
// 上滑动slideUp()
$("div").slideUp(500);
})
$("button").eq(2).click(function(){
// 滑动切换 slideToggle()
$("div").slidToggle(500)
})
})
</script>
滑动切换效果语法规范
slideToggle([speed，[easing],[fn]])
滑动切换效果参数
1.参数可以省略
2.speed:三种预定之一的字符串("slow"，"normal"，"fast")或者动画时长的毫秒数值
3.easing:(Optional)用来指定切换效果，默认是"swing"
事件切换
hover([over，]out)
1.over:鼠标移到元素上要触发的函数(相当于mouseenter)
2.out:鼠标移出元素要触发的的函数(相当于mouseleave)
1.事件切换 hover就是鼠标经过和离开的复合写法
$(function(){
$(".nav>li").hover(function(){
$(this).children("ul").slideDown(200);
},function(){
$(this).children("ul").slideUp(200);
})
})
1.事件切换 hover 如果只写一个函数，那么鼠标经过和鼠标离开都会触发函数
$(".nav>li").hover(function(){
$(this).children("ul").slideToggle();
})
