jquery 基本动画效果
作者：互联网
- jQuery提供了三组基本动画，这些动画都是标准的、有规律的效果，jQuery还提供了自定义动画的功能。
三组基本动画
- 显示(show)与隐藏(hide)与切换(toggle)是一组动画：
- 滑入(slideUp)与滑出(slideDown)与切换(slideToggle)，效果与卷帘门类似
- 淡入(fadeIn)与淡出(fadeOut)与切换(fadeToggle)
第一组基本动画案例：
<body>
<div style="width: 500px;height: 300px;background-color: #ccc">
</div>
<button id="show">显示</button>
<button id="hide">隐藏</button>
<button id="toggle">切换</button>
<script type="text/javascript">
$(function(){
$('#show').click(function(){
$('div').show(1000);
//$('div').show(); 不传参数就是马上显示
});
$('#hide').click(function(){
$('div').hide(1000);
//$('div').hide(); 不传时间就是马上隐藏
});
$('#toggle').click(function(){
$('div').toggle(1000);
//$('div').toggle();
});
})
</script>
</body>
第二组基本动画案例：
<body>
<div style="width: 500px;height: 300px;background-color: #ccc;display: none;">
</div>
<button id="slideUp">上滑</button>
<button id="slideDown">下拉</button>
<button id="slideToggle">切换</button>
<script type="text/javascript">
$(function(){
$('#slideUp').click(function(){
$('div').slideUp(500);
//$('div').slideUp(); 不传参数就是默认时间
});
$('#slideDown').click(function(){
$('div').slideDown(500);
//$('div').slideDown(); 不传时间就是默认时间
});
$('#slideToggle').click(function(){
$('div').slideToggle(500);
//$('div').slideToggle();
});
})
</script>
</body>
第三组基本动画案例：
<body>
<div style="width: 500px;height: 300px;background-color: #ccc;">
</div>
<button id="fadeIn">淡入</button>
<button id="fadeOut">淡出</button>
<button id="fadeToggle">切换</button>
<script type="text/javascript">
$(function(){
$('#fadeIn').click(function(){
$('div').fadeIn(500);
//$('div').fadeIn(); 不传参数就是默认时间
});
$('#fadeOut').click(function(){
$('div').fadeOut(500);
//$('div').fadeOut(); 不传时间就是默认时间
});
$('#fadeToggle').click(function(){
$('div').fadeToggle(500);
//$('div').fadeToggle();
});
})
</script>
</body>
标签：jquery,动画,不传,效果,function,div,click,500 来源： https://www.cnblogs.com/dazahui/p/14459683.html