当前位置 博文首页 > 立志欲坚不欲锐，成功在久不在速度：jQuery - 效果动画
前言：? ? ? ?
? ? ? ? jQuery给我们封装了很多的动画效果，相比起简单传统的CSS来说，功能强大很多，今天就来学习学习 jQuery给我们封装的一系列的动画效果：
? ? ? ?最常见的有一下几种效果：
?
1.1语法：
show([speed],[easing],[fn]);//显示的语法
hide([speed],[easing],[fn]);//隐藏的语法1.2参数解释：?
1.3例子：
<body>
<p></p>
<button>隐藏</button>
<button>显示</button>
<script>
$(function(){
//隐藏
$("button").eq(0).click(function(){
$("p").hide(1000,function(){
alert("1");
});
})
//显示
$("button").eq(1).click(function(){
$("p").show(1000,function(){
alert("2");
});
})
})
</script>
</body>1.4隐藏和显示相互切换： toggle()
可以使用 toggle() 方法来切换 hide() 和 show() 方法, 显示被隐藏的元素，并隐藏已显示的元素：
1.4.1 语法：?? ? toggle([speed],[fn]);?
注： 参数的含义与上面的一样?
例子：?
<button>切换</button>
<div></div>
//切换按钮
$("button").click(function(){
$("div").toggle(1000);
})?
? ? ??在jQuery中可以通过四个方法来实现元素的淡入淡出，这四个方法分别是：
? ? ? fadeIn()、fadeOut()、fadeToggle() 以及?fadeTo()
2.1 fadIn() 方法? 用于淡入已隐藏的元素
? 语法：? ??
$(selector).fadeIn([speed],[easing],[callback]);参数解释：
例子：
$("button").eq(0).click(function(){
$("div").fadeIn(1000);
}); ?2.2? fadeOut()方法? ?用于淡出可见元素?
语法：?
$(selector).fadeOut([speed],[easing][callback]);例子：
$("button").eq(1).click(function(){
$("div").fadeOut(1000);
})?2.3 fadeToggle()方法? ?可以在fadeIn()与 fadeOut()方法中进行切换
如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。
语法：
$(selector).fadeToggle([speed],[easing],[callback]);例子：
$("button").eq(2).click(function(){
//淡入淡出切换 fadeToggle()
$("div").fadeToggle(1000);
})2.4 fadeTo()方法? 可以修改元素透明度（值介于 0~1 之间）
语法：
$(selector).fadeTo(speed,opacity,[callback]);参数解释：?
注意： 这个函数的 speed? 是必须的参数
? ? ? ? ? ? opacity 参数将效果设置为给定的不透明度 (0~1) 之间
例子：
$("button").eq(3).click(function(){
//修改透明度 fadeTo 这个速度和透明度都要写
$("div").fadeTo(1000,0.2);
})2.5? 把这四个方法的例子结合在一起形成一个可以运行的例子：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src=jquery.min.js></script>
<style>
div {
width:200px;
height:200px;
background-color:red;
};
</style>
</head>
<body>
<button>淡入</button>
<button>淡出</button>
<button>淡入淡出切换</button>
<button>修改透明度</button>
<div style="display:none;"></div> //设置div默认属性为隐藏的
<script>
$(function(){
//淡入效果
$("button").eq(0).click(function(){
$("div").fadeIn(1000);
});
//淡出效果
$("button").eq(1).click(function(){
$("div").fadeOut(1000);
})
// 切换效果
$("button").eq(2).click(function(){
//淡入淡出切换 fadeToggle()
$("div").fadeToggle(1000);
})
$("button").eq(3).click(function(){
//修改透明度 fadeTo 这个速度和透明度都要写
$("div").fadeTo(1000,0.2);
})
})
</script>
</body>修改透明度的功能我们经常会用到，比如：当鼠标放在页面的某个地方就会高亮显示
?
3.1? slideDown()方法 用于向下滑动元素?
语法：?
$(selector).slideDown([speed],[callback]);例子：
$("button").eq(0).click(function(){
//下滑动 slideDown()
$("div").slideDown();
})3.2 slideUp()方法? ?用于向上滑动元素
语法：
$(selector).slideUp([speed],[callback]);例子：
$("button").eq(1).click(function(){
//上滑动 slideup
$("div").slideup();
})3.3slideToggle()
可以在 slideDown() 与 slideUp() 方法之间进行切换。如果元素向下滑动，则 slideToggle() 可向上滑动它们。
如果元素向上滑动，则 slideToggle() 可向下滑动它们。
语法：
$(selector).slideToggle([speed],[callback]);例子：
$("button").eq(2).click(function(){
//滑动切换 slideToggle()
$("div").slideToggle(500);
})?
cs