在本文中，我們將看到如何使用不同的 JQuery 方法來生成動畫。
hide（） 和 show()hide() 方法只是將樣式設置為內聯 display: none 對於選定的項目。 相反，show() 方法恢復顯示屬性。
讓我們看一個例子：
<script>
$(document).ready(function(){
// Hide displayed paragraphs
$(".hide-btn").click(function(){
$("p").hide();
});
// Show hidden paragraphs
$(".show-btn").click(function(){
$("p").show();
});
});
</script>在第一種情況下，當您單擊按鈕 (hide-btn)，在第二種情況下，當您單擊按鈕時顯示段落 (show-btn).
您還可以指定持續時間參數，以在一段時間內動畫顯示和隱藏效果。
可以使用前置字符串之一指定持續時間defi黑夜 'slow' o 'fast'，或以毫秒為單位，以獲得更高的精度； 較高的值表示較慢的動畫。
<script>
$(document).ready(function(){
// Hide displayed paragraphs with different speeds
$(".hide-btn").click(function(){
$("p.normal").hide();
$("p.fast").hide("fast");
$("p.slow").hide("slow");
$("p.very-fast").hide(50);
$("p.very-slow").hide(2000);
});
// Show hidden paragraphs with different speeds
$(".show-btn").click(function(){
$("p.normal").show();
$("p.fast").show("fast");
$("p.slow").show("slow");
$("p.very-fast").show(50);
$("p.very-slow").show(2000);
});
});
</script>字符串預defi尼塔 'fast' 表示持續時間為 200 毫秒，而字符串 'slow' 表示持續時間為 600 毫秒。
我們可以指定一個函數 callback 在方法完成後執行 show() 或的 hide()
<script>
$(document).ready(function(){
// Display alert message after hiding paragraphs
$(".hide-btn").click(function(){
$("p").hide("slow", function(){
// Code to be executed
alert("The hide effect is completed.");
});
});
// Display alert message after showing paragraphs
$(".show-btn").click(function(){
$("p").show("slow", function(){
// Code to be executed
alert("The show effect is completed.");
});
});
});
</script>jQuery 方法 toggle() 以這樣的方式顯示或隱藏項目：如果項目最初顯示，它將被隱藏； 相反，如果隱藏，它將顯示（實際上切換其可見性）。
<script>
$(document).ready(function(){
// Toggles paragraphs display
$(".toggle-btn").click(function(){
$("p").toggle();
});
});
</script>同樣，您可以指定參數 duration 對於方法 toggle()，以這樣一種方式來動畫可見和隱藏之間的過渡，如方法 show() e hide()
<script>
$(document).ready(function(){
// Toggles paragraphs with different speeds
$(".toggle-btn").click(function(){
$("p.normal").toggle();
$("p.fast").toggle("fast");
$("p.slow").toggle("slow");
$("p.very-fast").toggle(50);
$("p.very-slow").toggle(2000);
});
});
</script>同樣，你也可以指定一個函數 callback 對於方法 toggle().
<script>
$(document).ready(function(){
// Display alert message after toggling paragraphs
$(".toggle-btn").click(function(){
$("p").toggle(1000, function(){
// Code to be executed
alert("The toggle effect is completed.");
});
});
});
</script>fadeIn() e fadeOut()您可以使用 jQuery 方法 fadeIn()e fadeOut() 顯示或隱藏 HTML 元素，逐漸增加或減少它們的不透明度並創建淡入淡出的效果。
<script>
$(document).ready(function(){
// Fading out displayed paragraphs
$(".out-btn").click(function(){
$("p").fadeOut();
});
// Fading in hidden paragraphs
$(".in-btn").click(function(){
$("p").fadeIn();
});
});
</script>與其他 jQuery 效果方法一樣，您可以選擇為方法指定持續時間或速度參數 fadeIn()e fadeOut()，以控制淡入淡出的持續時間。 可以使用前置字符串之一指定持續時間defi黑夜 'slow' o 'fast'，或以毫秒為單位； 較高的值表示較慢的動畫。
<script>
$(document).ready(function(){
// Fading out displayed paragraphs with different speeds
$(".out-btn").click(function(){
$("p.normal").fadeOut();
$("p.fast").fadeOut("fast");
$("p.slow").fadeOut("slow");
$("p.very-fast").fadeOut(50);
$("p.very-slow").fadeOut(2000);
});
// Fading in hidden paragraphs with different speeds
$(".in-btn").click(function(){
$("p.normal").fadeIn();
$("p.fast").fadeIn("fast");
$("p.slow").fadeIn("slow");
$("p.very-fast").fadeIn(50);
$("p.very-slow").fadeIn(2000);
});
});
</script>方法的效果 fadeIn() / fadeOut() 它類似於 show() / hide(), 但不同於方法 show() / hide(), 前者只為目標元素的不透明度設置動畫，而不為它們的大小設置動畫。
你也可以指定一個函數 callback 在方法完成後運行 fadeIn() / fadeOut().
<script>
$(document).ready(function(){
// Display alert message after fading out paragraphs
$(".out-btn").click(function(){
$("p").fadeOut("slow", function(){
// Code to be executed
alert("The fade-out effect is completed.");
});
});
// Display alert message after fading in paragraphs
$(".in-btn").click(function(){
$("p").fadeIn("slow", function(){
// Code to be executed
alert("The fade-in effect is completed.");
});
});
});
</script>fadeToggle()jQuery 方法 fadeToggle() 通過動畫顯示或隱藏所選元素的不透明度，這樣如果元素最初顯示，它將淡出； 如果它被隱藏，它將淡出（即切換淡入淡出效果）。
<script>
$(document).ready(function(){
// Toggles paragraphs display with fading
$(".toggle-btn").click(function(){
$("p").fadeToggle();
});
});
</script>您還可以為方法指定生命週期參數 fadeToggle() 至於方法 fadeIn() / fadeOut(), 以控制淡入淡出動畫的持續時間或速度。
<script>
$(document).ready(function(){
// Fade Toggles paragraphs with different speeds
$(".toggle-btn").click(function(){
$("p.normal").fadeToggle();
$("p.fast").fadeToggle("fast");
$("p.slow").fadeToggle("slow");
$("p.very-fast").fadeToggle(50);
$("p.very-slow").fadeToggle(2000);
});
});
</script>fadeToggle() 方法也可以指定一個函數 callback.
<script>
$(document).ready(function(){
// Display alert message after fade toggling paragraphs
$(".toggle-btn").click(function(){
$("p").fadeToggle(1000, function(){
// Code to be executed
alert("The fade-toggle effect is completed.");
});
});
});
</script>fadeTo()jQuery 方法 fadeTo() 它類似於方法 fadeIn(), 但不同於方法 fadeIn()， 方法 fadeTo() 讓您將元素混合到一定程度的不透明度。
$(selector).fadeTo(speed, opacity, callback);所需參數 opacity 指定目標元素的最終不透明度，可以是 0 到 1 之間的數字。參數 duration o speed 此方法也需要指定動畫淡入淡出的持續時間。
<script>
$(document).ready(function(){
// Fade to paragraphs with different opacity
$(".to-btn").click(function(){
$("p.none").fadeTo("fast", 0);
$("p.partial").fadeTo("slow", 0.5);
$("p.complete").fadeTo(2000, 1);
});
});
</script>slideUp() e slideDown()jQuery 方法 slideUp() e slideDown() 它們用於通過逐漸降低或增加高度（即向上或向下滾動）來隱藏或顯示 HTML 元素。
<script>
$(document).ready(function(){
// Slide up displayed paragraphs
$(".up-btn").click(function(){
$("p").slideUp();
});
// Slide down hidden paragraphs
$(".down-btn").click(function(){
$("p").slideDown();
});
});
</script>與其他 jQuery 效果方法一樣，您可以選擇為方法指定持續時間或速度參數 slideUp() e slideDown() 控制幻燈片動畫的持續時間。 可以使用前置字符串之一指定持續時間defi黑夜 'slow' o 'fast'，或以毫秒為單位； 較高的值表示較慢的動畫。
<script>
$(document).ready(function(){
// Sliding up displayed paragraphs with different speeds
$(".up-btn").click(function(){
$("p.normal").slideUp();
$("p.fast").slideUp("fast");
$("p.slow").slideUp("slow");
$("p.very-fast").slideUp(50);
$("p.very-slow").slideUp(2000);
});
// Sliding down hidden paragraphs with different speeds
$(".down-btn").click(function(){
$("p.normal").slideDown();
$("p.fast").slideDown("fast");
$("p.slow").slideDown("slow");
$("p.very-fast").slideDown(50);
$("p.very-slow").slideDown(2000);
});
});
</script>您還可以指定一個回調函數在方法完成後執行 slideUp() o slideDown().
<script>
$(document).ready(function(){
// Display alert message after sliding up paragraphs
$(".up-btn").click(function(){
$("p").slideUp("slow", function(){
// Code to be executed
alert("The slide-up effect is completed.");
});
});
// Display alert message after sliding down paragraphs
$(".down-btn").click(function(){
$("p").slideDown("slow", function(){
// Code to be executed
alert("The slide-down effect is completed.");
});
});
});
</script>slideToggle()jQuery 方法 slideToggle() 通過動畫顯示或隱藏所選元素的高度，這樣如果元素最初顯示，它將向上滾動； 如果隱藏，它將向下滾動，即在方法之間切換 slideUp() e slideDown().
<script>
$(document).ready(function(){
// Toggles paragraphs display with sliding
$(".toggle-btn").click(function(){
$("p").slideToggle();
});
});
</script>同樣，您可以為方法指定生命週期參數 slideToggle() 如何 slideUp() e slideDown().
<script>
$(document).ready(function(){
// Slide Toggles paragraphs with different speeds
$(".toggle-btn").click(function(){
$("p.normal").slideToggle();
$("p.fast").slideToggle("fast");
$("p.slow").slideToggle("slow");
$("p.very-fast").slideToggle(50);
$("p.very-slow").slideToggle(2000);
});
});
</script>同樣，你也可以為方法指定一個回調函數 slideToggle().
<script>
$(document).ready(function(){
// Display alert message after slide toggling paragraphs
$(".toggle-btn").click(function(){
$("p").slideToggle(1000, function(){
// Code to be executed
alert("The slide-toggle effect is completed.");
});
});
});
</script>animate()jQuery 方法 animate() 它用於創建自定義動畫。 方法 animate() 用於動畫數字 CSS 屬性，例如 width, height, margin, padding, opacity, top, left 等等但非數字屬性，如 color o background-color 它們不能使用基本的 jQuery 功能進行動畫處理。
方法的基本語法 animate() 如下：
$(selector).animate({ properties }, duration, callback);方法參數 animate() 具有以下含義：
'slow' o 'fast'，或以毫秒為單位； 較高的值表示較慢的動畫。下面是該方法的一個簡單示例 animate() 單擊按鈕時，它會將圖像從其原始位置向右移動 300 像素。
<script>
$(document).ready(function(){
$("button").click(function(){
$("img").animate({
left: 300
});
});
});
</script>您還可以使用該方法同時為一個元素的多個屬性設置動畫 animate(). 所有屬性同時動畫，沒有任何延遲。
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
width: "300px",
height: "300px",
marginLeft: "150px",
borderWidth: "10px",
opacity: 0.5
});
});
});
</script>您還可以使用 jQuery 的串聯功能在隊列中逐個為一個元素的多個屬性設置動畫。
下面的示例顯示了一個排隊或鏈接的 jQuery 動畫，其中每個動畫將在元素上的前一個動畫完成後開始。 我們將在以後的文章中看到串聯功能。
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box")
.animate({width: "300px"})
.animate({height: "300px"})
.animate({marginLeft: "150px"})
.animate({borderWidth: "10px"})
.animate({opacity: 0.5});
});
});
</script>也有可能 defi完成動畫屬性的相對值。 如果使用前綴指定值 += o -=, 目標值是通過從屬性的當前值中加上或減去指定的數字來計算的。
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
top: "+=50px",
left: "+=50px",
width: "+=50px",
height: "+=50px"
});
});
});
</script>除了數值，每個屬性都可以接受字符串 'show', 'hide' e 'toggle'. 如果您只想將屬性從當前值設置為初始值，反之亦然，這將非常有用。
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
width: 'toggle'
});
});
});
</script>stop()jQuery 方法 stop() 用於在完成之前停止當前正在運行的 jQuery 動畫或對所選元素的效果。
方法的基本語法 stop() jQuery 可以通過以下方式給出：
$(selector).stop(stopAll, goToEnd);上述語法中的參數含義如下：
false，這意味著只會停止當前動畫，隊列中的其餘動畫將稍後執行。false.這是一個演示該方法的簡單示例 stop() 在實際操作中，您可以在單擊按鈕時開始和停止動畫。
<script>
$(document).ready(function(){
// Start animation
$(".start-btn").click(function(){
$("img").animate({left: "+=150px"}, 2000);
});
// Stop running animation
$(".stop-btn").click(function(){
$("img").stop();
});
// Start animation in the opposite direction
$(".back-btn").click(function(){
$("img").animate({left: "-=150px"}, 2000);
});
// Reset to default
$(".reset-btn").click(function(){
$("img").animate({left: "0"}, "fast");
});
});
</script>這是此方法的另一個示例，如果您再次單擊該按鈕Slide Toggle” 在開始動畫之後但在它完成之前，動畫會立即從保存的起始點的相反方向開始。
<script>
$(document).ready(function(){
// Kill and toggle the current sliding animation
$(".toggle-btn").on("click", function(){
$(".box").stop().slideToggle(1000);
});
});
</script>創建動畫懸停效果時，您可能遇到的最常見問題之一是當您快速放置和移除鼠標光標時，多個動畫排隊。 為什麼，在這種情況下， mouseenter GLI mouseleave 事件在動畫完成之前被快速觸發。 為避免此問題並創建漂亮流暢的懸停效果，您可以添加 stop(true, true)到方法鏈，像這樣：
<script>
$(document).ready(function(){
$(".box").hover(function(){
$(this).find("img").stop(true, true).fadeOut();
}, function(){
$(this).find("img").stop(true, true).fadeIn();
});
});
</script>JavaScript 語句逐行執行。 但是，由於 jQuery 效果需要一些時間才能完成，下一行代碼可能會在前一個效果仍在運行時運行。 為了防止這種情況發生，jQuery 為每個效果方法提供了一個回調函數。
回調函數是在效果完成後運行的函數。 回調函數作為參數傳遞給效果的方法，它們通常作為最後一個方法參數出現。 例如jQuery效果方法的基本語法 slideToggle() 帶有一個回調函數，可以指定如下：
$(selector).slideToggle(duration, callback);考慮以下示例，我們在其中放置了語句 slideToggle()e alert()一個挨著另一個。 如果您嘗試此代碼，將在單擊切換按鈕後立即出現警報，而無需等待滑動切換效果完成。
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").slideToggle("slow");
alert("The slide toggle effect has completed.");
});
});
</script>這是我們插入語句的前一個示例的修改版本 alert() 在該方法的回調函數中 slideToggle(). 如果您嘗試此代碼，一旦滑動切換效果完成，就會出現警告消息。
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").slideToggle("slow", function(){
// Code to be executed once effect is complete
alert("The slide toggle effect has completed.");
});
});
});
</script>同樣，你可以 defi完成其他 jQuery 效果方法的回調函數，例如 show(), hide(), fadeIn(), fadeOut(), animate()等
<script>
$(document).ready(function(){
$("button").click(function(){
$("h1, p").slideToggle("slow", function(){
// Code to be executed once effect is complete
alert("The slide toggle effect has completed.");
});
});
});
</script>如果您嘗試上面的示例代碼，您將收到兩次相同的警告消息，每個項目一次 <h1> e <p>，點擊激活按鈕後。
BlogInnovazione.it