创建自定义动画
语法:
$(selector).animate({params},speed,callback);
(1)params:定义形成动画的 CSS 属性。
(2)speed :效果的时长。它可以取以下值:”slow”、”fast” 或毫秒。
(3)callback :动画完成后所执行的函数名称
示例
$("button").click(function(){
$("div").animate({left:'250px'});
});
操作多个属性
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
使用相对值
在值的前面加上 += 或 -=
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
使用预定义的值
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});
使用队列功能
$("button").click(function(){
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});
停止动画
语法:
$(selector).stop(stopAll,goToEnd);
(1)stopAll :可选参数,是否应该清除动画队列,默认是 false,即仅停止活动的动画。
(2)goToEnd :可选参数,是否立即完成当前动画。默认是 false。
示例:
$("#stop").click(function(){
$("#panel").stop();
});
Callback
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide("slow",function(){
alert("段落现在被隐藏了");
});
});
});
</script>
方法链接
<script>
$(document).ready(function()
{
$("button").click(function(){
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
});
});
</script>