Web前端基础(18)jQuery中的动画

show()和hide()

show()和hide()是jQuery中最基本的动画方法,该动画操作了display:none;

$(function(){
    $("#panel").toggle(function(){
        $(this).next().hide();
    }, function(){
        $(this).next().show();
    })
})

show()和hide()可以传入动画执行毫秒数或者传入“nomal”, “slow”, “fast”关键字控制速度。

fadeIn()和fadeOut()

fadeIn()和fadeOut()只是改变透明度。

slideUp()和slideDown()

slideUp()和slideDown()只会改变元素的高度(由上到下展开, 由下到上收起)。

自定义动画animate()

animate(params, speed, callback);

参数说明: params: 一个包含样式属性和值的映射 speed:速度参数,可选 callback:动画完成时执行的函数,可选

$(function(){
    $("#panel").click(function(){
        $(this).animate({left:"500px"}, 3000);
    })
})

累加,累减

如果将left:“500px”改为 left:“+=500px”含义就变成了在当前位置累加500px

多重动画

$("#myImg").click(function(){
    $(this).animate({left:"500px", height:"200px"}, 3000);
})

顺序执行多个动画

$(this).animate({left:"500px"}, 3000).animate({height:"200px"}, 3000);

停止动画

stop([clearQueue].[gotoEnd]);

参数clearQueue和gotoEnd都是可选参数,为boolean值,clearQueue代表是否要清空未执行完的动画队列,gotoEnd代表是否直接将正在执行的动画跳到末状态。如果直接用stop()则会立即停止当前动画,如果队列还有动画,则以当前状态继续执行下面的动画。

$("#panel").hover(function(){
    $(this).stop(true).animate({height:"150", width:"300"}, 200);
}, function(){
    $(this).stop(true).animate({height:"22", width:"60"}, 300);
})

判断是否动画状态

if(!$(element).is(":animated")){ 
    //不在动画状态,可以添加新动画
}

延迟动画

在动画执行过程中,如果想对动画进行延迟操作,那么可以使用delay()方法,使用方式如下:

$(this).animate({left:"400px", height:"200px", opacity:"1"}, 3000)
	.delay(1000)
	.animate({top:"200px", width:"200px"}, 3000)
	.delay(2000)
	.fadeOut("slow");

其他动画方法

除了上面的动画外,jQuery中还有4个专门用于交互的动画。

toggle()

toogle()方法可以切换元素的可见状态。

$("#panel h5.head").click(function(){
    $(this).next().toggle();
})

slideToggle()

通过改变高度来切换元素的可见状态。

fadeTo()

把元素的透明度通过渐进的方式调整到指定值,这个动画只调整元素的不透明度。

$("#panel h5.head").click(function(){
    $(this).next().fadeTo(600, 0.2);
})

fadeToggle()

通过改变透明度来切换元素的可见状态。

动画方法概括

方法名说明
hide()和show()同时修改多个样式属性,即高度、宽度、不透明度
fadeIn()和fadeOut()只改变不透明度
slideUp()和slideDown()只改变高度
fadeTo()只改变不透明度
toggle()用了替代hide()和show()方法
slideToggle()用来替代slideUp()和slideDown()
fadeToggle()用来替代fadeIn()和fadeOut
animate()自定义动画,上面动画实质上都调用了animate()