一、简单动画
show([arg])//将元素display属性置为除none之外的值,具体记忆功能;
hide([arg])//将元素display属性置为none
toggle([arg])//实现元素状态的切换
以上两个函数均可带参数,一类是关键字参数:slow,normal,fast;一类是数值参数。如show(1000)表示在1秒钟之内将元素由隐藏置为显示,
slow -> 600,normal -> 400,fast -> 200
fadeIn([arg])//提升已降低透明度的元素,直到显示;即“淡出”;
fadeOut([arg])//降低元素透明度,直至隐藏,style值为"none";即 “淡入”
slideUp()//元素由下到上缩短隐藏
slideDown()//元素由上到下伸展
<div class="con">
<div id="box">
![](img/banner01.png)
![](img/banner02.png)
![](img/banner03.png)
![](img/banner04.png)
![](img/banner05.png)
</div>
<div><span id="prev">prev</span><span id="next">next</span></div>
</div>
$(function(){
var index=0;
$("#next").click(function(){
$("#box img").stop().eq(index).fadeIn().siblings().fadeOut();
if(index==$("#box img").length){
index=0
}else{
index++;
}
})
$("#prev").click(function(){
$("#box img").stop().eq(index).fadeIn().siblings().fadeOut();
if(index==0){
index=$("#box img").length
}else{
index--;
}
})
})
2.animate动画
第一种:
$("").animate( properties [, duration ] [, easing ] [, complete ] )
1)properties 类型: PlainObject
一个CSS属性和值的对象,动画将根据这组对象移动。
2)duration (默认: 400)
类型: Number or String
一个字符串或者数字决定动画将运行多久。
(手册网注:默认值: "normal", 三种预定速度的字符串("slow", "normal", 或 "fast")
或表示动画时长的毫秒数值(如:1000) )
3)easing (默认: swing)
类型: String
一个字符串,表示过渡使用哪种缓动函数。(译者注:jQuery自身提供"linear" 和 "swing")
4)complete
类型: Function()
在动画完成时执行的函数。
eg:
$("#go").click(function(){
$("#block").animate({
width: "70%",
opacity: 0.4,
marginLeft: "0.6in",
fontSize: "3em",
borderWidth: "10px"
}, 1500,"linear" );
});
第二种:
$().animate( properties, options )
1)properties 类型: PlainObject
一个CSS属性和值的对象,动画将根据这组对象移动。
2)options 类型: PlainObject
一组包含动画选项的值的集合。
支持的选项:
A)duration (default: 400) Type: Number or String
一个字符串或者数字决定动画将运行多久。(手册网注:默认值: "normal", 三种预定
速度的字符串("slow", "normal", 或 "fast")或表示动画时长的毫秒数值(如:1000) )
B)easing (default: swing) Type: String
一个字符串,表示过渡使用哪种缓动函数。
C)queue (default: true) Type: Boolean or String
一个布尔值,指示是否将动画放置在效果队列中。如果为false时,将立即开始动画。
从jQuery1.7开始,队列选项也可以接受一个字符串,在这种情况下,在动画被添加到
由该字符串表示的队列中。当一个自定义的队列名称被使用,动画不会自动启动;你必
须调用.dequeue("queuename")来启动它。
D)specialEasing Type: PlainObject
由此方法的第一个参数properties定义的一个或多个CSS属性,及其相应的缓动函数组成的键值对map。( 1.4 新增)
E)step Type: Function( Number now, Tween tween )
每个动画元素的每个动画属性将调用的函数。这个函数为修改Tween 对象提供了一个机会来改变设置中得属性值。
F)progress Type: Function( Promise animation, Number progress, Number remainingMs )
每一步动画完成后调用的一个函数,无论动画属性有多少,每个动画元素都执行单独的函数。 (version added: 1.8)
G)complete Type: Function() 在动画完成时执行的函数。
H)done Type: Function( Promise animation, Boolean jumpedToEnd ) 在动画完成时执行的函数。
(他的Promise对象状态已完成). (version added: 1.8)
I)fail Type: Function( Promise animation, Boolean jumpedToEnd ) 动画失败完成时执行的函数。
(他的Promise对象状态未完成)。 (version added: 1.8)
J)always Type: Function( Promise animation, Boolean jumpedToEnd ) 在动画完成或未完成情况下停止时执行的函数。
(他的Promise对象状态已完成或未完成)。 (version added: 1.8)
eg:
$("#box").animate(
{
"left":"500px",
"width":"400px"
},
{
duration:4000,
step:function(){
console.log($(this).css("left"))
},
easing:"linear",
complete:function(){
console.log("完成了")
}
}
)
eg:
$(function(){
var surtime=0;
$(".box").hover(function(){
$(".pro").stop();
},function(){
//剩余的时间
surtime = ($(".box").width()-$(".pro").width())*(5000/($(".box").width()));
$(".pro").animate({width:"600px"},{duration:surtime,step:function(){
var num =Math.round(($(this).width()/$(".box").width())*100);
var speed =Math.round( $(".pro").width()/((num/100)*5));
$(this).html(num+"%"+"---"+speed);
console.log(speed);
}})
}).mouseleave();
})