jQueryjquery
show()表示显示
hide()表示隐藏
speed中以（slow，normal，fast）表示动画时长并发
<script src="js/jquery.js"></script>
<style>
#qyc {
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div id="qyc"></div>
<script>
$('#qyc').hide(3000, function(){
$('#qyc').show(3000);
});
/*
* 显示与与隐藏
* 无动画-改变宽度和高度
* show()-显示
* hide()-隐藏
* 有动画
* show(speed, callback)
* speed-动画执行时长
* callback-动画执行完毕后回调函数*/
</script>
</body>
以slideUp和slideDown来更改属性的高度值来实现动画效果ide
<script src="js/jquery.js"></script>
<style>
#qyc {
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div id="qyc"></div>
<script>
/*
滑动式动画-slideUp()和slideDown()
* 注意-没有无动画版本
* 效果-改变指定元素的高度
*/
$('#qyc').slideUp(3000);
$('#qyc').slideDown(3000);
</script>
</body>
fadeln()方法和fadeOut来改变透明度来实现动画效果函数
<script src="js/jquery.js"></script>
<style>
#qyc {
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div id="qyc"></div>
<script>
$('#qyc').fadeOut(3000);
$('#qyc').fadeIn(3000);
// 改变元素的透明度
</script>
</body>
<script src="js/jquery.js"></script>
<style>
#qh {
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<button id="qyc">按钮</button>
<div id="qh"></div>
<script>
$('#qyc').click(function(){
// $('#qyc').toggle(3000);
// $('#qyc').slideToggle(3000);
$('#qh').fadeToggle(3000);
});
</script>
</body>
<style>
#qyc {
width: 200px;
height: 200px;
background-color: blue;
position: absolute;
}
</style>
</head>
<body>
<div id="qyc"></div>
<script>
/*
* animate()方法-自定义动画方法
1.animate(properties, duration, callback)
* properties-表示CSS的样式属性
* 设置动画执行结束的样式属性值
* duration-表示动画执行的时长，单位为毫秒
* callback-表示动画执行完毕后的回调函数
2.animate(properties, options)
* properties-表示CSS的样式属性
* 设置动画执行结束的样式属性值
* options-表示设置动画的相关参数
* duration-表示动画执行的时长，单位为毫秒
* complete-表示动画执行完毕后的回调函数
* queue-布尔值，设置是否添加到动画队列中
*/
/*$('#qyc').animate({
width : 100,
height : 100
}, 3000);*/
/*$('#qyc').animate({
left : 100
}, 3000);*/
$('#qyc').animate({
left : 100
}, {
speed : 3000
});
</script>
</body>
指同时进行多个动画效果，并以前后顺序执行动画
<script src="js/jquery.js"></script>
<style>
#qyc {
width: 200px;
height: 200px;
background-color: blue;
position: absolute;
}
</style>
</head>
<body>
<div id="qyc"></div>
<script>
/*$('#qyc').animate({
left : 400,
top : 400
}, 3000);*/
/*并发效果-就是指多个动画同时执行
*多个CSS样式属性值同时改变-动画多个值综合效果
*/
$('#qyc').animate({
left : 400
}, 3000, function(){
$('#qyc').animate({
top : 400
}, 3000);
});
/*
排队效果 - 就是指多个动画按照定义前后顺序执行
多个CSS的样式属性值前后改变
*/
$('#qyc').animate({
left : 400
}, {
duration : 3000
}).animate({
top : 400
}, {
duration : 3000,
queue : true
});
</script>
</body>
以stop()方法表示中止指定元素运行的动画 以gotoEnd表示动画马上执行完成code
<script src="js/jquery.js"></script>
<style>
#qyc {
width: 200px;
height: 200px;
background-color: blue;
position: absolute;
}
</style>
</head>
<body>
<button id="start">开始</button>
<button id="stop">中止</button>
<div id="qyc"></div>
<script>
$('#start').click(function(){
$('#qyc').animate({
left : 800
}, 3000).animate({
top : 600
}, 3000);
});
$('#stop').click(function(){
/*
* stop()方法没有接收任何参数时-中止执行动画
* stop(queue)方法的第一个参数
* false-中止当前动画，但队列中动画继续执行
* true-中止当前动画，而且清空动画
*/
$('#qyc').stop(true, false);
});
</script>
</body>
以delay()方法设置延时必定时间，在执行动画效果orm
<script src="js/jquery.js"></script>
<style>
#qyc {
width: 200px;
height: 200px;
background-color: blue;
position: absolute;
}
</style>
</head>
<body>
<div id="qyc"></div>
<script>
$('#qyc').animate({
left: 800
}, 5000).delay(1000).animate({
top: 600
}, 5000);
</script>
</body>