您的位置：首页 > Web前端 > JQuery

jQuery的动画

2016-05-25 09:38 435 查看

jQuery提供了一些动画效果，非常实用，用示例程序简单总结一些。

<html>
<head>
<title> new document </title>
<meta  charset="utf-8" />
<script src="jquery/jquery-2.2.4.min.js"> </script>
<style type="text/css">
#div01{
background-color: yellow;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="div01">hello world</div></br>
<button id="button01">消失和隐藏</button></br>
<button id="button02">滑动</button></br>
<button id="button03">渐变透明消失</button></br>
<button id="button04">改变透明度</button></br>
<button id="button05">切换</button></br>
<button id="button06">自定义动画</button></br>
<button id="button07">停止一切动画</button></br>
</body>
<script type="text/javascript">
$(document).ready(function(){
//消失和隐藏
$('#button01').on('click',function(){
$('#div01').hide(2000,function(){
$('#div01').show('normal');
});
});
//滑动
$('#button02').on('click',function(){
$('#div01').slideUp(2000,function(){
$('#div01').slideDown('slow');
});
});
//透明度变化
$('#button03').on('click',function(){
$('#div01').fadeOut(2000,function(){
$('#div01').fadeIn('normal');
});
});
//改变透明度至
$('#button04').on('click',function(){
$('#div01').fadeTo('fast', 0.3);
});
//切换
$('#button05').on('click',function(){
$('#div01').toggle();
});
//自定义动画
$('#button06').on('click',function(){
$('#div01').animate({
width:"+=100%",
height: "+=100%",
fontSize: "10em",
borderWidth:10
}, 1000);
});
//stop的作用
$('#button07').on('click',function(){
$('#div01').animate({
width:"+=100%",
height: "+=100%",
fontSize: "10em",
borderWidth:10
}, 10000).hide();

setTimeout(function(){
$('#div01').stop();
},2000);
});
});
</script>
</html>

最后一个stop方法，里边还有两个参数，stop（true,true）;第一个参数如果为true，那么停止自定义动画的后就不会再执行的后边的那个hide（）方法。反之则继续执行。

第二个参数，默认为false，即2秒之后停止在当前动画。如果为true，则在两秒之后，直接变到animate方法执行完的结果，即加100%，大家可以把代码复制运行一下看一下效果。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航