一:show()和hide()修改很多属性(height,width,不透明度)
show()方法相当于css("dispaly","block/inline")
hide()方法相当于css("display",none)
参数 1.X值(元素将在X毫秒X显示)2.normal(正常),3fast(快)
二:fadeln()和fadeOut() 只改变元素的不透明度
fadeln()在指定的时间内降低元素的不透明性,直到消失(display:none)
fadeout()
三:slideUp()和sildeDown()只会改变元素的高度
slideDown(),如果display属性值为“none”,这个元素将由上向下延伸显示。
slideUp()
四:自定义动画animate()
animate(params,speed,callback)
params:一个包含试样样式属性及值得映射 speed:速度选项,callback函数
1.自定义动画
<script type="text/javascript">
$(function(){
$(".box").click(function(){
$(this).animate({left:"500px"},3000);})
})
</script>
div样式应该把position设置位,relative,absolute
2.累加累减动画
<script type="text/javascript">
$(function(){
$(".box").click(function(){
$(this).animate({left:"+=500px"},3000);})
})
</script>
3.综合动画
$(function(){$(".box").css("opacity","0.5");
$(".box").click(function(){
$(this).animate({left:"500px",height:"200px",opacity:"1"},3000)
.animate({top:"200px",width:"200px"},3000)
.fadeOut("slow");})
})
4.动画中的回调函数
$(function(){
$(".box").css("opacity","0.5");
$(".box").click(function(){
$(this).animate({left:"500px",height:"200px",opacity:"1"},3000)
.animate({top:"200px",width:"200px"},3000 function(){
$(this).css("border",5px solid blue);})
})
四:停止动画和判断是否处于动画状态
stop()
$(this).stop()
.animate({height:"150px",wiidth:"300px"})
2.判断元素是否处于动画状态
if(!$(e).is("animated")){}
3.延迟动画delay()
五:其他动画效果
toggle()可以切换元素的可见性
slideToggle()通过高度变化来切换匹配元素的可见性,这个动画只调节元素的高度
fadeTo()可以通过元素的不透明度以渐进的方式调整到指定的值。只调节不同透明度,即匹配的高度宽度不变!
fadeToggle()通过不透明度来切换匹配元素的可见性