显示隐藏
显示：show()
隐藏：hide()
显示/隐藏 ： toggle()
注意： 主要改变的是display属性
滑入滑出
滑出 ：slideDown()
滑入 ： slideUp()
滑入/滑出：slideToggle()
注意： 主要改变的是display属性
淡入淡出
淡入：fadeIn()
淡出：fadeOut()
淡入/淡出：fadeToggle()
注意： 主要改变的是display和opacity属性
淡入到指定透明度
淡入到指定的透明度值： fadeTo()
注意
调用时一定要传入速度， 和 透明度fadeTo(3000,0.5)
动画语法：
- 语法：jq对象.
show([speed], [easing], [fn]) - 参数：
-
speed: 运动的速度
值：
1.1 字符："slow","normal", or "fast"
1.2 时间：毫秒计算 -
easing: 运动的曲线
swing(默认值) : 先慢后快再慢
linear : 匀速运动 -
fn: 回调函数
动画结束后执行的函数
-
自定义动画
- 语法：jq对象.
animate(运动的属性,运动时间,回调函数) - 案例：jq对象.
animate({"left" : "400px","width" : "1000px"},[运动时间],[回调函数]) -
运动属性：只有具有层级关系的属性才能够运动
层级关系 ： 1 2 3 4 5 6 ... 依次递增 依次递减 - 案例
//需求： 点击button按钮，让div框运动起来
$("button").click(function(){
//一个属性运动
//$("div").animate({"left" :"100px"},1000)
//多个属性运动
//$("div").animate({"left" :"100px","width" : "200px"},1000)
//多个动画
$("div").animate({"left" :"100px"},1000).animate({"width" :"200px"},1000)
});
停止动画
语法： jq对象.stop(false,false)
参数：
第一个参数： 是否停止执行后面的所有动画
true : 停止
false : 继续执行
第二个参数：当前动画是否立即执行到终点
true : 立即执行到终点
false : 不执行到终点
<body>
<div>
<span>分享到</span>
<a href="#">1</a>
<a href="#">2</a>
</div>
</body>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 100px;
height: 200px;
background-color: #cccccc;
position: absolute;
/* 大盒子也绝对定位 */
right: -100px;
top: 10px;
}
span {
background-color: #33f;
width: 20px;
position: absolute;
right: 100px;
color: #ffffff;
text-align: center;
}
</style>
<script>
// DOM加载事件
$(function () {
// 鼠标悬停事件， 合成事件
$("div").hover(function () {
// stop清空动画队列，且goto到当前正在执行的动画末尾
$("div").stop(true,true).delay(200).animate({"right": 0},200);
},function () {
// 延迟动画解决反复触发展开与关闭问题
$("div").stop(true,true).delay(200)
.animate({"right": "-100px"},200);
}
);
});
</script>
网友评论