jQuery--自定义动画.animate()

.animate()自定义动画

jQuery的.animate（）方法可以通过更改元素的css属性值来实现动画效果；但是它也有一个小小的遗憾，就是无法通过该方法设置颜色的相关属性；不过jQuery提供了有关颜色的相关插件。

语法：

$("selector").animate({params},speed,easing,callback);

1. params：【必选】该属性包含动画的相关属性及属性值；
2. speed： 【可选】动画显示或隐藏的速度，单位毫秒；
3. easing： 【可选】设置动画速度的函数，可选参数为“linear”、“swing”；
4. callback：【可选】动画结束后执行的函数名；

$("box").animate({
left:"220px",//前提是该元素设置了定位属性；
top:"220px",
width:"500px",
height:"500px",
marginTop:"100px"//margin-top,此处要配合js语法使用驼峰式写法；
}，3000，function(){alert("动画结束了!");})

.animate（）动画队列功能

通过调用多个.animate()创建动画，jQuery会创建包含这些方法调用的队列，并且依次执行；

//盒子移动到右上角；
$("box").animate({
left:"500px",
top:"0px"
}，2000});
//盒子移动到右下角；
$("box").animate({
left:"500px",
top:"500px"
}，2000});
//盒子移动到左下角；
$("box").animate({
left:"0px",
top:"500px"
}，2000});
//盒子移动到左上角；
$("box").animate({
left:"0px",
top:"0px"
}，2000});

jQuery基本动画

语法：

$("selector").hide(speed,callback)/$("selector").show(speed,callback)

$("box").show();//显示元素；

$("box").hide();//隐藏元素；

toggle()方法；
语法：

$("selector").toggle(speed,callback)；

$("box").toggle();//当前元素显示时调用该方法时隐藏，当前元素隐藏时调用该方法时显示；

2. 淡入/淡出：fadeIn()/fadeOut();
说明：fadeIn（）用于淡入隐藏的元素；fadeOut()用于淡出显示的元素；
语法：

$("selector").fadeIn(speed,callback)；/$("selector").fadeOut(speed,callback)；

$("box").fadeIn(1000,function (){
console.log("淡入结束!");
})；
$("box").fadeOut(1000,function (){
console.log("淡出结束!");
})；

fadeToggle()方法；

$("box").fadeToggle(1000，function(){
console.log("淡入淡出结束!");
});
//当前元素完全显示或完全隐藏；

fadeTo()方法；
语法：

$(selector).fadeTo(speed, opacity, callback);该方法的主要特点是可以设置透明度；

$("box").fadeTo(1000，0.5，function(){
console.log("淡入淡出结束!");
});
//opacity必写，并且取值在0~1之间；

3. 展开/收起：slideDown()/slideUp();
说明：slideDown()向下滑动元素；slideUp()向上滑动元素；
语法：

$("selector").slideDown(speed,callback)；/$("selector").slideUp(speed,callback)；

$("box").slideDown()(1000,function (){
console.log("下滑结束!");
})；
$("box").slideUp(1000,function (){
console.log("上滑结束!");
})；

slideToggle方法；

$("box").slideTo(1000，0.5，function(){
console.log("滑动结束!");
});
//当前元素上滑或下滑

• 点赞
• 收藏
• 分享
• 文章举报