jquery动画
1.hide([speed,[easing],[fn]])
方法:隐藏显示的元素
参数：
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
fn:在动画完成时执行的函数，每个元素执行一次。
②[speed],[easing],[fn]
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing:(optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn:在动画完成时执行的函数，每个元素执行一次。
2.show([speed,[easing],[fn]])
方法：显示隐藏的匹配元素。
参数：
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
fn:在动画完成时执行的函数，每个元素执行一次。
②[speed],[easing],[fn]
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing:(optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn:在动画完成时执行的函数，每个元素执行一次。
注意：参数可以是一个number类型,也可以是字符串类型
案例：
我要评论<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<style>
div{
width: 400px;
}
img{
width:90px ;
height:90px;
vertical-align: top;
}
</style>
<script src="jquery-1.12.2.js"></script>
<script>
// $(function () {
// $("#btn1").click(function () {
// //回调函数
// $("div>img").hide(1000,function () {
// alert("结束了");
// });
// });
//
// $("#btn2").click(function () {
// //回调函数
// $("div>img").show(1000,function () {
// alert("结束了====");
// });
// });
// });
</script>
<script>
$(function () {
$("#btn1").click(function () {
//获取div,最后一个图片,隐藏
$("div>img").last("img").hide(800,function () {
//arguments.callee相当于递归
$(this).prev().hide(800,arguments.callee);
});
});
//显示
$("#btn2").click(function () {
$("div>img").first("img").show(800,function () {
//arguments.callee相当于递归
$(this).next().show(800,arguments.callee);
});
});
});
</script>
</head>
<body>
<input type="button" value="隐藏动画" id="btn1"/>
<input type="button" value="显示动画" id="btn2"/>
<div>
<img src="images/1.jpg"/>
<img src="images/2.jpg"/>
<img src="images/3.jpg"/>
<img src="images/4.jpg"/>
</div>
</body>
</html>
动画方法:animate方法
第一个参数:键值对,(数值的属性可以改,颜色不能改)
第二个参数:动画的时间
第三个参数:回调函数
例如：
$("#im").animate({"left":"10px","top":"500px","width": "50px", "height": "50px"},2000,function () {
$("#im").animate({"left":"+=505px","top":"-=400px","width":"+=200px","height":"+=200px"},1000);
});
停止动画效果:stop()方法
例如：
$(".wrap>ul>li").mouseover(function () {
$(this).children("ul").stop().show(500);// 显示 ul
});
$(".wrap>ul>li").mouseout(function () {
$(this).children("ul").stop().hide(500);// 显示 ul
});
其他动画方法
1.$("div").slideup(1000);// 滑入
2.$("div").slidedown(1000);// 滑出
3.$("div").slidetoggle(1000);// 切换滑入滑出
4.$("div").fadein(1000);// 淡入
5.$("div").fadeout(1000);// 淡出
6.$("div").fadetoggle(1000);// 切换淡入淡出
7.
// 可以设置透明度,参数 1: 时间 , 参数 2: 到达透明度
$( “div ”).fadeto(1000,0.3);// 一个参数,常用
// 参数 1: 没有时间 , 参数 2: 到达透明度
// 和 css("opacity",0.1);
$("div").fadeto(0,0.1);// 一个参数
特此声明：如需转载请注明出处，如有疑问请及时提出以便于改正，如有侵权，联系删除，谢谢
如对本文有疑问， 点击进行留言回复！！
网友评论