animate(params , speed , callback)
1、params:包含样式属性值及值的映射,如{color:“red”,width:“400px”,height:“400px”}
2、speed:速度参数,可选
3、callback:在动画完成时执行的参数,可选
****需要注意的是,为了能让元素动起来,需要把元素的position设置成“relative”或“absolute”****
$(function() {
$('div').bind("click", function() {
$(this).animate({
color : "red",
width : "400px",
height : "400px"
}, 4000);
})
})
方法名 | 说明 |
hide()和show() | 同时修改多个样式属性即高度height、宽度width和不透明度opacity |
fadeIn()和fadeOut() | 只改变不透明度opacity |
slideUp()和slideDown() | 只改变高度height |
fadeTo() | 只改变不透明度opacity |
toggle() | 用来代替hide()和show() |
slideToggle() | 用来代替slideUp()和slideDown() |
fadeToggle() | 用来代替fadeIn()和fadeOut() |
animate() | 自定义动画 |
********************************1、动画的回调函数callback实现动画完成后要做的事情****************************
同一元素可以有多重动画效果,写成链式,如:要实现点击div时,让它向右移动的同时宽度增大到400px,并将不透明度变成100%,然后,再让它向下移动的同时高度增大到400px,这期间边框变成红色,代码如下:
$(function() {
$('div').bind("click", function() {
$(this).animate({
left : "400px",
width : "400px",
opacity : "1"
}, 4000).animate({
top : "200px",
height : "400px"
}, 4000).css("border", "1px solid red");
})
})
如果想实现在最后一步的时候,边框变成红色,需要把css写在最后一个动画的回调函数里,因为css不会加入到动画队列中区,而是被立即执行,解决方案如下:
$(function() {
$('div').bind("click", function() {
$(this).animate({
left : "400px",
width : "400px",
opacity : "1"
}, 4000).animate({
top : "200px",
height : "400px"
}, 4000, function() {
$(this).css("border", "1px solid red");
})
})
})
******************************************************2、停止元素的动画**************************************************
stop( [ clearQueue ] , [ gotoEnd ] );
1、clearQueue:可选,boolean类型,是否要清空未执行完的动画队列;
2、 gotoEnd:可选,boolean类型,是否直接将正在执行的动画跳转到末状态
实现停止当前动画并直接达到动画的末状态
$(function() {
$("#panel").hover(function() {
$(this).stop(true,true).animate({
height : "150",
}, 2000).animate({
width : "300"
}, 2000);
}, function() {
$(this).stop(true,true).animate({
height : "22",
}, 3000).animate({
width : "300"
}, 2000);
});
})
******************************************************3、判断元素是否处于动画状态******************************
$(function() {
if (!$("element").is(":animated")) {
// 如果元素不处于动画状态,则为元素添加动画
....................
}
})
******************************************************4、其他方法**************************************************
$(function() {
$("#panel h5.head").click(function() {
$(this).next().toggle(); //点击主题,显示与隐藏
$(this).next().slideToggle(); //点击主题,滑动显示与隐藏
$(this).next().fadeTo(600, 0.2);//点击主题,渐退显示
$(this).next().fadeToggle(); //点击主题,渐退显示与隐藏
})
})
$(function() {
$("#panel h5.head").click(function() {
$(this).next().toggle(); // 点击主题,显示与隐藏,
});
})
//toggle()相当于以下代码
$(function() {
$("#panel h5.head").toggle(function() {
$(this).next().hide();
}, function() {
$(this).next().show();
});
})
$(function() {
$("#panel h5.head").click(function() {
$(this).next().slideToggle(); //点击主题,滑动显示与隐藏
});
})
//slideToggle()相当于以下代码
$(function() {
$("#panel h5.head").toggle(function() {
$(this).next().slideUp();
}, function() {
$(this).next().slideDown();
});
})
//fadeToggle()相当于以下代码
$(function() {
$("#panel h5.head").click(function() {
$(this).next().fadeToggle(); //点击主题,渐退显示与隐藏
});
})
$(function() {
$("#panel h5.head").toggle(function() {
$(this).next().fadeIn();
}, function() {
$(this).next().fadeOut();
});
})