jQuery动画效果
1. 隐藏和显示
show()方法和hide()方法是jQuery中最基本的动画方法。在HTML文档里，为一个元素调用hide()方法，会将该元素的display样式改为“none”。
1.1 hide() 和 show()
我们可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：
<body>
<div style="width: 200px; height: 200px; background-color: yellow;">
我是一个div标签</div>
<button class="show">显示</button>
<button class="hide">隐藏</button>
<script>
// 显示元素
$(".show").click(function () {
$("div").show();
});
// 隐藏元素
$(".hide").click(function () {
$("div").hide();
});
</script>
</body>
hide() 和 show() 分别可以携带两个可选参数，一个是speed参数另外一个是callback参数。
下面的例子演示了带有 speed 参数的 hide() 方法：
<body>
<div style="width: 200px; height: 200px; background-color: yellow;">
我是一个div标签</div>
<button class="show">显示效果</button>
<button class="hide">隐藏效果</button>
<script>
//
4000
动画显示元素
$(".show").click(function () {
$("div").show(1000, function () {
console.log("div动画显示完成");
});
});
// 动画隐藏元素
$(".hide").click(function () {
$("div").hide(1000, function () {
console.log("div动画隐藏完成");
});
});
</script>
</body>
1.2 toggle()方法
我们可以使用 toggle() 方法来切换 hide() 和 show() 方法。
toggle() 可以携带两个可选参数，一个是speed参数另外一个是callback参数，两个参数的作用和show()方法一样。
<body>
<div style="width: 200px; height: 200px; background-color: yellow;">
我是一个div标签</div>
<button class="toggle">显示隐藏切换效果</button>
<script>
// 切换显示或隐藏元素
$(".toggle").click(function () {
$("div").toggle(1000, function () {
console.log("切换完毕");
});
});
</script>
</body>
2.淡入和淡出
fadeIn()方法和fadeOut()方法与show方法不相同的是，fadeIn()方法和fadeOut()方法只改变元素的不透明度。fadeOut()方法会在指定的一段时间内降低元素的不透明度，直到元素完全消失(“display: none”)。fadeIn()方法则恰好相反。
加粗样式2.1 fadeIn()和fadeOut()
fadeIn() 用于淡入已隐藏的元素，fadeOut() 方法用于淡出可见元素。
fadeIn() 和 fadeOut() 分别可以携带两个可选参数，一个是speed参数另外一个是callback参数，两个参数的作用和show()方法一样。
<body>
<div style="width: 200px; height: 200px; background-color: yellow;">
我是一个div标签</div>
<button class="fade-in">淡入效果</button>
<button class="fade-out">淡出效果</button>
<script>
$(".fade-in").click(function () {
$("div").fadeIn(1000, function () {
console.log("淡入动画完成");
});
});
$(".fade-out").click(function () {
$("div").fadeOut(1000, function () {
console.log("淡出动画完成")
});
})
</script>
</body>
2.2 fadeToggle() 方法
fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果；如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。
fadeToggle() 可以携带两个可选参数，一个是speed参数另外一个是callback参数，两个参数的作用和show()方法一样。
<body>
<div style="width: 200px; height: 200px; background-color: yellow;">
我是一个div标签</div>
<button class="toggle">淡入淡出切换效果</button>
<script>
$(".toggle").click(function () {
$("div").fadeToggle(1000, function () {
console.log("淡入淡出切换动画完成");
});
});
</script>
</body>
2.3 fadeTo() 方法
fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间），语法：$(selector).fadeTo(speed, opacity, callback);。
fadeTo() 方法中opacity 参数【必须】将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。
下面的例子演示了带有不同参数的 fadeTo() 方法：
<body>
<div style="width: 200px; height: 200px; background-color:
yellow; opacity:0;"></div>
<button class="fade-to">给定的不透明度</button>
<script>
$(".fade-to").click(function () {
$("div").fadeTo(500, 0.25, function () {
console.log("透明度达到0.25");
});
$("div").fadeTo(1000, 0.5, function () {
console.log("透明度达到0.5");
});
$("div").fadeTo(1000, 0.75, function () {
console.log("透明度达到0.75");
});
$("div").fadeTo(500, 1.0, function () {
console.log("透明度达到1.0");
});
});
</script>
</body>
3. 展开和收起
slideDown()方法和slideUp()方法只改变元素的高度，slideUp()方法会在指定的一段时间内降低元素的高度，直到元素完全消失(“display: none”)。slideDown()方法则恰好相反。
3.1 slideDown()和slideUp()
slideDown() 方法用于向下滑动元素，slideUp() 方法用于向上滑动元素。
slideDown() 和 slideUp() 分别可以携带两个可选参数，一个是speed参数另外一个是callback参数，两个参数的作用和show()方法一样。
<body>
<div style="width: 200px; height: 200px; background-color: yellow;"></div>
<button class="slideUp">向上滑动</button>
<button class="slideDown">向下滑动</button>
<script>
$(".slideUp").click(function () {
$("div").slideUp(1000, function () {
console.log("向上滑动完成");
});
});
$(".slideDown").click(function () {
$("div").slideDown(1000, function () {
console.log("向下滑动完成");
});
});
</script>
</body>
3.2 slideToggle() 方法
slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
如果元素向下滑动，则 slideToggle() 可向上滑动它们；如果元素向上滑动，则 slideToggle() 可向下滑动它们。
slideToggle() 可以携带两个可选参数，一个是speed参数另外一个是callback参数，两个参数的作用和show()方法一样。
<body>
<div style="width: 200px; height: 200px; background-color: yellow"></div>
<button class="toggle">向上向下滑动切换</button>
<script>
$(".toggle").click(function () {
$("div").slideToggle(1000, function () {
console.log("切换完成");
});
});
</script>
</body>
4. 自定义动画
前面已经讲了多种类型的动画，如果这些动画还无法满足用户的需求，那么就需要对动画有更多的控制，需要采取一些高级的自定义动画来解决这些问题。在jQuery中，我们可以使用animate()方法来自定义动画。
4.1 animate() 方法
animate() 方法用于创建自定义动画的函数。
语法：$(selector).animate({params}, speed, easing, callback);
自定义动画实例：
<body>
<div style="width: 200px; height: 200px; opacity: 0.2;
background-color: gold; position: relative;"></div>
<button class="animate">自定义动画</button>
<script>
$(".animate").click(function () {
$("div").animation({
// 注意: margin-top也可写成驼峰式marginTop
"margin-top": "100px",
"opacity": "1.0",
"width": "300px",
"height": "300px",
// 注意：如果进行位置操作，则需要设置元素定位属性值：
relative、fixed或absolute
"left": "100px"
}, 3000, function () {
console.log("自定义动画结束");
});
});
</script>
</body>
4.2 animate() 使用队列功能
jQuery 提供针对动画的队列功能，我们可以编写多个 animate() 调用，jQuery 会创建包含这些方法调用的“内部”队列。然后逐一运行这些 animate 调用。
<body>
<div class="wrap" style="width: 200px; height: 200px;
background-color: gold;"></div>
<button class="animate">使用队列功能</button>
<script>
$(".animate").click(function () {
// 盒子移动到右上角
$("#box").animate({
"top" : "10px",
"left" : "450px"
}, 1000);
// 盒子移动到右下角
$("#box").animate({
"top" : "450px",
"left" : "450px"
}, 1000);
// 盒子移动到左下角
$("#box").animate({
"top" : "450px",
"left" : "10px"
}, 1000);
// 盒子移动到左上角
$("#box").animate({
"top" : "10px",
"left" : "10px"
}, 1000);
});
</script>
</body>
4.3 jQuery插件
jQuery动画中并不支持色彩动画（例如背景颜色，字体颜色），如果想要生成颜色动画，那么我们可以使用 jquery.color.js 插件来帮我们实现。
<body>
<div style="width: 200px; height: 200px;
background-color: gold; position: relative;">我是一个DIV</div>
<button class="animate">自定义动画</button>
<script>
$(".animate").click(function () {
$("div").animate({
"margin-top": "100px",
"width": "300px",
"height": "300px",
"color": "red",
"background-color" : "blue",
"left": "100px"
}, 3000);
});
</script>
</body>
5. 停止动画
很多时候需要停止匹配元素正在进行的动画，那么我们可以使用stop()方法来停止动画。
语法：$(selector).stop(stopAll, goToEnd);
停止动画示例：
<body>
<div style="width: 100px;height: 100px;background-color:red;
position: relative;"></div>
<button id="btn" style="float: right;">停止动画</button>
<script>
$("div").click(function () {
$(this).animate({"left": "+=300px"}, 3000);
$(this).animate({"top": "+=300px"}, 3000);
$(this).animate({"left": "-=300px"}, 3000);
$(this).animate({"top": "-=300px"}, 3000);
});
$("#btn").click(function () {
// 表示立即停止全部动画，原地停止
$("div").stop(true, false);
});
</script>
</body>
- jQuery用animate()方法实现简单动画效果
- jquery二级菜单动画效果的实现代码
- Jquery 动画积分效果
- 基于JQuery的数字改变的动画效果--可用来做计数器
- JQuery 淡出、 动画、显示/隐藏切换等效果
- jQuery 常见特殊动画效果
- JQuery实现DIV其他动画效果的简单实例
- Jquery商品飞入购物车动画效果实例展示
- 使用 jquery.easing.js 增强动画过渡效果
- JQuery—简单动画效果
- jQuery实现图像旋转动画效果
- JQuery中动画效果的left值
- [置顶] HTML5 实现小车动画效果(Canvas/CSS3/JQuery)
- jQuery动画效果-fadeIn fadeOut淡入浅出示例代码
- jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
- jQuery实现鼠标悬停3d菜单展开动画效果
- jquery动画效果
- jQuery动画效果
- jQuery实现级联菜单效果(仿淘宝首页菜单动画)
- 拿jquery做动画效果（一）