jQuery 是一款備受稱贊的 JavaScript 庫,它使編寫 JavaScript 代碼變得更加簡單快捷。其中一個重要的功能是運動效果,比如讓一個 HTML 元素在網頁中移動。
// 當點擊按鈕時,HTML 元素將在頁面上向右移動 $("button").click(function(){ $("div").animate({left: '250px'}); });
以上代碼使用了 jQuery 的 animate() 函數。它允許您以動畫效果來更改 HTML 元素的樣式。在這里,我們將 left 樣式的值從默認的 0 移動到 250px。當用戶單擊按鈕時,我們使用 click() 函數觸發該函數。
// 在一秒內將 HTML 元素從透明變為不透明 $("button").click(function(){ $("div").animate({opacity: '1'}, "slow"); });
這段代碼使用了一個不同的屬性,實現了一個略有不同的效果,即元素的透明度從默認值 0 變為 1。在這里,我們還指定了動畫的速度“slow”,它確定了完成這個效果所需的時間。您也可以使用“fast”或以毫秒為單位指定動畫速度的數字。
這些只是 jQuery 運動效果的兩個例子。您可以使用 animate() 函數在頁面上創建多種不同的交互效果。
上一篇jquery 過渡
下一篇jquery 進度條