本文以實例形式詳細講述了jQuery動畫特效的實現方法。 1.自製摺疊內容塊 內容塊如下： <div class="module"> <div class="caption"> <span>標題</span> <img src="rollup.gif" alt="rollup" title="rol ...
本文以實例形式詳細講述了jQuery動畫特效的實現方法。
1.自製摺疊內容塊
內容塊如下：
<div class="module">
<div class="caption">
<span>標題</span>
<img src="rollup.gif" alt="rollup" title="rolls up this module"/>
</div>
<div class="body">
春江彼岸兩大明星產品之一：超越型複式，在春江酈城97複式基礎上再升級，終點： </div>
</div>
|
給img元素綁定點擊事件。
$(function() {
$('div.caption img').click(function () {
//先找到img的父級元素，再找該父級元素的子元素
var $body = $(this).closest('div.module').find('div.body');
if ($body.is(':hidden')) {
$body.show();
} else {
$body.hide();
}
});
});
切換元素的顯示狀態，還可以用toggle方法。
$(function() {
$('div.caption img').click(function () {
$(this).closest('div.module').find('div.body').toggle();
});
});
以上是沒有動畫效果的，有時候感覺會很唐突。實際上，show,hide,toggle方法都可以有動畫效果。比如：
$(function() {
$('div.caption img').click(function () {
$(this).closest('div.module').find('div.body').toggle('slow');
});
});
又比如：
$(function() {
$('div.caption img').click(function () {
$(this).closest('div.module').find('div.body').toggle('slow', function() {
$(this).closest('div.module').toggleClass('rolledup', $(this).is(':hidden'))
});
});
});
2.使元素淡入淡出
fadeIn(speed, callback)
fadeOut(speed, callback)
fadeTo(speed, opacity, callback)
3.上下滑動元素
slideDown(speed, callback)
slideUp(speed, callback)
slideToggle(speed, callback)
4.停止動畫
stop(clearQueue, gotoEnd)
5.創建自定義動畫
animate(properties, duration, easing, callback)
$('.classname').animate({opacity:'toggle'},'slow')
如果寫一個擴展函數。
$.fn.fadeToggle = function(speed){
return this.animate({opacity:'toggle'},'slow');
}
6.自定義縮放動畫
$('.classname').each(function(){
$(this).animate({
width: $(this).width() * 2,
height: $(this).height() * 2
});
});
7.自定義掉落動畫
$('.classname').each(function(){
$(this)
.css("position","relative")
.animate({
opacity: 0,
top: $(window).height() - $(this).height() - $(this).position().top
},'slow',function(){ $(this).hide(); })
});
8.自定義消散動畫
$('.classname').each(function(){
var position = $(this).position();
$(this)
.css({
position: 'absolute',
top: position.top,
left:position.left
})
.animate({
opacity: 'hide',
width: $(this).width()*5,
height: $(this).height()*5
top: position.top - ($(this).height() * 5 / 2),
left: position.left - ($(this).width() * 5 /2)
},'normal');
});
9.隊列中的動畫
//動畫插入隊列
$('img').queue('chain', function(){});
$('img').queue('chain', function(){});
$('img').queue('chain', function(){});
$('img').queue('chain', function(){});
$('button').click(function(){
$('img').dequeue('chain'); //刪除隊列中的動畫
})
cleaeQueue(name)//刪除所有未執行的隊列中的動畫
delay(duration, name)//為隊列中所有未執行的動畫添加延遲
