jQuery中的动画效果

112 阅读 0 评论 74 点赞

我是靠谱客的博主聪明手链，最近开发中收集的这篇文章主要介绍jQuery中的动画效果，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1.显示与隐藏

show 显示

<button>显示</button>
<button>隐藏</button>
<div class="show">显示</div>
<script>
$(function(){
// 单击显示按钮 div显现
$('button:eq(0)').click(function(){
$('.show').show(2000)
})
})
</script>

hidden 隐藏

<button>显示</button>
<button>隐藏</button>
<div class="show">显示</div>
<script>
$(function(){
// 单击隐藏按钮 div消失
$('button:eq(1)').click(function(){
$('.show').hide(2000,function(){
$(this).show(1000)
})
})
})
</script>

2.上拉和下拉效果

slideUp() 上拉

slideDown() 下拉

slideToggle() 如果元素未显示下拉显示的就是上拉

<button>上拉</button>
<button>下拉</button>
<button>toggle</button>
<div class="show">div标签</div>
<script>
$(function(){
$("button:eq(0)").click(function(){
$(".show").slideUp(2000)
})
$("button:eq(1)").click(function(){
$(".show").slideDown(2000)
})
$("button:eq(2)").click(function(){
$(".show").slideToggle(2000)
})
})
</script>

3. 淡入和淡出效果

fadeln（）淡入

fadeout()淡出

fadeToggle()

<button>淡入</button>
<button>淡出</button>
<button>toggle</button>
<div class="show">div标签</div>
<script>
$(function(){
$("button:eq(0)").click(function(){
$(".show").fadeIn(2000)
})
$("button:eq(1)").click(function(){
$(".show").fadeOut(2000)
})
$("button:eq(2)").click(function(){
$(".show").fadeToggle(2000)
})
})
</script>

4.自定义动画

animate()

<style>
.show{
width: 240px;
height: 180px;
background-color: red;
}
</style>
<body>

<div class="show">div标签</div>
<script>
$(function(){
$(".show").animate({
"margin-top":'200px',
"margin-left":'300px'
},2000)
})
</script>