jquery中常用的動(dòng)畫的方法就是hide()與show().

$(element).hide()這段代碼可以與這相等element.css("display","none")

 在hide(time)與show(time)中填入事件，可以慢慢消失跟顯現(xiàn)?？梢孕薷脑氐亩鄠€(gè)樣式，高度，寬度，不透明度。

另一組方法fadeIn()與fadeOut()這個(gè)與hide跟show不同的是，當(dāng)使用hide或者show的時(shí)候會(huì)改變網(wǎng)頁的高度，而fadeIn與fadeOut則不會(huì)。

                $("#panel h5.head").toggle(function(){                    $(this).addClass("highlight");                    $(this).next().fadeOut(1000);                },function(){                    $(this).removeClass("highlight");                    $(this).next("div .content").fadeIn(1000);                });還有一組是slideUp，slideDown改變高度。

動(dòng)畫方法概括

動(dòng)畫隊(duì)列

(1)一組元素上的動(dòng)畫效果。

a)當(dāng)在一個(gè)animate()方法中應(yīng)用多個(gè)屬性時(shí)，動(dòng)畫是同時(shí)發(fā)生的。

b)當(dāng)以鏈?zhǔn)降膶懛☉?yīng)用動(dòng)畫方法時(shí)，動(dòng)畫是按照順序發(fā)生的。

(2)多組元素上的動(dòng)畫效果

a)默認(rèn)情況下，動(dòng)畫都是同時(shí)發(fā)生的。

b)當(dāng)以回調(diào)的形式應(yīng)用動(dòng)畫方式時(shí)，動(dòng)畫是按照回調(diào)順序發(fā)生的。

另外，在動(dòng)畫方法中，要注意其他非動(dòng)畫的方法會(huì)插隊(duì)，例如css()方法，要使這些非動(dòng)畫的方法也按照順序來執(zhí)行，需要把這些方法寫在動(dòng)畫方法的回調(diào)函數(shù)中。

舉一個(gè)animate的例子：

$(“#id”).animat({left:”400px”,top:”300px”},3000,function(){


     $(this).css(“border”,”1px solid blue”);


});

若想要?jiǎng)赢嬐Ｖ?，需要在animate()方法前插入stop()方法

例如:$(“#id”).stop().animate()注意stop中的兩個(gè)參數(shù)。

判斷元素是否在動(dòng)畫狀態(tài)的方法時(shí)：

$(element).is(“:animated”);

jQuery 可以很方便的為頁面中的元素添加一些動(dòng)態(tài)效果，可以用其內(nèi)建效果，也可以自己定義效果。

下面是一些內(nèi)建的效果方法：

• $.fn.show 顯示所選擇的元素
• $.fn.hide 隱藏所選擇的元素
• $.fn.fadeIn 淡入
• $.fn.fadeOut 淡出
• $.fn.slideDown 通過垂直滑動(dòng)的效果來顯示元素
• $.fn.slideUp 通過垂直華東的效果來隱藏元素
• $.fn.slideToggle 顯示滑動(dòng)或隱藏滑動(dòng)交互執(zhí)行

一個(gè)簡(jiǎn)單的例子：

$('h1').show();

設(shè)置動(dòng)畫效果的時(shí)長(zhǎng)

對(duì)于 $.fn.show 和 $.fn.hide 而言，默認(rèn)情況下其時(shí)長(zhǎng)是 0，其它效果的默認(rèn)時(shí)長(zhǎng)一般是 400 毫秒，當(dāng)然也自己設(shè)置時(shí)長(zhǎng)：

$('h1').fadeIn(300);   // 300 毫秒
$('h1').fadeOut('slow'); // slow 是內(nèi)建的速度常量

jQuery 默認(rèn)的速度常量都位于 jQuery.fx.speeds 對(duì)象中：

speeds: {
  slow: 600,
  fast: 200,
  // Default speed
  _default: 400
}

我們也可以擴(kuò)展這個(gè)對(duì)象，添加自己常用的速度值：

jQuery.fx.speeds.blazing = 100;
jQuery.fx.speeds.turtle = 2000;

回調(diào)函數(shù)

如果想在動(dòng)畫效果結(jié)束后再執(zhí)行一些代碼，那么可以給這些動(dòng)畫方法換入一個(gè)回調(diào)函數(shù)：

$('div.old').fadeOut(300, function() {
 $(this).remove();
});

如果選擇器中沒有匹配到任何元素，那么回調(diào)函數(shù)也不會(huì)被執(zhí)行，所以在執(zhí)行回調(diào)函數(shù)前做個(gè)判斷是有必要的：

var $thing = $('#nonexistent');

var cb = function() {
  console.log('done!');
};

if ($thing.length) {
  $thing.fadeIn(300, cb);
} else {
  cb();
}

自定義動(dòng)畫方法

jQuery 中的 $.fn.animate 方法可以用來擴(kuò)展我們的自定義動(dòng)畫，主要是通過 animate 方法設(shè)置元素 CSS 屬性來實(shí)現(xiàn)的，設(shè)置元素 CSS 屬性的時(shí)候可以使用絕對(duì)值，也可以使用相對(duì)值：

$('div.funtimes').animate(
  {
    left : "+=50",
    opacity : 0.25
  },
  300, // 時(shí)長(zhǎng)
  function() { console.log('done!'); // 回調(diào)函數(shù)
});

但是，用 $.fn.animate 創(chuàng)建自定義動(dòng)畫效果時(shí)，不能改變?cè)氐念伾Ｈ绻獎(jiǎng)?chuàng)建顏色動(dòng)畫，需要依賴其它一些顏色插件。
動(dòng)畫的風(fēng)格

jQuery 內(nèi)建的動(dòng)畫風(fēng)格有兩種：swing 和 linear

$('div.funtimes').animate(
  {
    left : [ "+=50", "swing" ],
    opacity : [ 0.25, "linear" ]
  },
  300
);

控制動(dòng)畫

jQuery 提供了幾個(gè)方法用來控制動(dòng)畫的執(zhí)行：

$.fn.stop 停止當(dāng)前正在執(zhí)行的動(dòng)畫

$.fn.delay 使動(dòng)畫暫停一段時(shí)間：

$('h1').show(300).delay(1000).hide(300);

jQuery.fx.off ：關(guān)閉動(dòng)畫的過度效果，相當(dāng)于把時(shí)長(zhǎng)設(shè)為 0。

最新評(píng)論