jQuery动画详解

jQuery动画

利用jQuery也是可以实现一些简单的动画效果的哦，下面来看看jQuery可以实现哪些效果吧。

显示与隐藏

方法：



例如：

<button id="a">显示</button>
<button id="b">隐藏</button>
<button id="c">交替</button>

$(function(){
	$('#a').click(function(){
		$('img').show('slow')
	})
	$('#b').click(function(){
       $('img').hide(5000)
    })

    $('#c').click(function(){
        $('img').toggle()
    })
})

效果：

收缩与展开

方法：



例如：

<button id="a">收缩</button>
<button id="b">展开</button>

$('#a').click(function(){
    $('img').slideUp('slow')
})

$('#b').click(function(){
    $('img').slideDown('slow')
})

效果：

淡入淡出

方法：



例如：

<button id="a">淡入</button>
<button id="b">淡出</button>
<button id="c">交替</button>

$('#a').click(function(){
    $('img').fadeIn('slow')
})

$('#b').click(function(){
    $('img').fadeOut(5000)
})
$('#c').click(function(){
    $('img').fadeToggle(2000)

效果：

停止动画

如果不想再继续使用动画，那么可以选择停止动画。

方法：stop()方法

例如：

$("div").stop();// 停止当前动画，继续下一个动画
$("div").stop(true);	// 清除div元素动画队列中的所有动画
$("div").stop(true, true);// 停止当前动画，清除动画队列中的所有动画
$("div").stop(false, true);// 停止当前动画，继续执行下一个动画