當前位置：首頁 > 前端技术 > vue >内容正文

vue

hide show vue 动画_jQuery动画效果

發布時間：2023/12/2 vue 28 豆豆

生活随笔收集整理的這篇文章主要介紹了 hide show vue 动画_jQuery动画效果小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

-------------------------------------------------------------------------------------------------------

1. 隱藏和顯示

show()方法和hide()方法是jQuery中最基本的動畫方法。在HTML文檔里，為一個元素調用hide()方法，會將該元素的display樣式改為“none”。

1.1 hide() 和 show()

我們可以使用 hide() 和 show() 方法來隱藏和顯示 HTML 元素：

<body><div style="width: 200px; height: 200px; background-color: yellow;">我是一個div標簽</div><button class="show">顯示</button><button class="hide">隱藏</button><script>// 顯示元素$(".show").click(function () {$("div").show();});// 隱藏元素$(".hide").click(function () {$("div").hide();});</script> </body>

hide() 和 show() 分別可以攜帶兩個可選參數，一個是speed參數另外一個是callback參數。

| 參數 | 描述 | | :---: | :---: | | speed | 【可選】規定隱藏/顯示的速度，時間單位為毫秒。 | | callback | 【可選】規定隱藏或顯示完成后所執行的函數名稱。 |

下面的例子演示了帶有 speed 參數的 hide() 方法：

<body><div style="width: 200px; height: 200px; background-color: yellow;">我是一個div標簽</div><button class="show">顯示效果</button><button class="hide">隱藏效果</button><script>// 動畫顯示元素$(".show").click(function () {$("div").show(1000, function () {console.log("div動畫顯示完成");});});// 動畫隱藏元素$(".hide").click(function () {$("div").hide(1000, function () {console.log("div動畫隱藏完成");});});</script> </body>

1.2 toggle()方法

我們可以使用 toggle() 方法來切換 hide() 和 show() 方法。

toggle() 可以攜帶兩個可選參數，一個是speed參數另外一個是callback參數，兩個參數的作用和show()方法一樣。

<body><div style="width: 200px; height: 200px; background-color: yellow;">我是一個div標簽</div><button class="toggle">顯示隱藏切換效果</button><script>// 切換顯示或隱藏元素$(".toggle").click(function () {$("div").toggle(1000, function () {console.log("切換完畢");});});</script> </body>

2.淡入和淡出

fadeIn()方法和fadeOut()方法與show方法不相同的是，fadeIn()方法和fadeOut()方法只改變元素的不透明度。fadeOut()方法會在指定的一段時間內降低元素的不透明度，直到元素完全消失("display: none")。fadeIn()方法則恰好相反。

2.1 fadeIn()和fadeOut()

fadeIn() 用于淡入已隱藏的元素，fadeOut() 方法用于淡出可見元素。

fadeIn() 和 fadeOut() 分別可以攜帶兩個可選參數，一個是speed參數另外一個是callback參數，兩個參數的作用和show()方法一樣。

<body><div style="width: 200px; height: 200px; background-color: yellow;">我是一個div標簽</div><button class="fade-in">淡入效果</button><button class="fade-out">淡出效果</button><script>$(".fade-in").click(function () {$("div").fadeIn(1000, function () {console.log("淡入動畫完成");});});$(".fade-out").click(function () {$("div").fadeOut(1000, function () {console.log("淡出動畫完成")});})</script> </body>

2.2 fadeToggle() 方法

fadeToggle() 方法可以在 fadeIn() 與 fadeOut() 方法之間進行切換。

如果元素已淡出，則 fadeToggle() 會向元素添加淡入效果；如果元素已淡入，則 fadeToggle() 會向元素添加淡出效果。

fadeToggle() 可以攜帶兩個可選參數，一個是speed參數另外一個是callback參數，兩個參數的作用和show()方法一樣。

<body><div style="width: 200px; height: 200px; background-color: yellow;">我是一個div標簽</div><button class="toggle">淡入淡出切換效果</button><script>$(".toggle").click(function () {$("div").fadeToggle(1000, function () {console.log("淡入淡出切換動畫完成");});});</script> </body>

2.3 fadeTo() 方法

fadeTo() 方法允許漸變為給定的不透明度（值介于 0 與 1 之間），語法：$(selector).fadeTo(speed, opacity, callback);。

fadeTo() 方法中opacity 參數【必須】將淡入淡出效果設置為給定的不透明度（值介于 0 與 1 之間）。

下面的例子演示了帶有不同參數的 fadeTo() 方法：

<body> <div style="width: 200px; height: 200px; background-color: yellow; opacity:0;"></div><button class="fade-to">給定的不透明度</button><script>$(".fade-to").click(function () {$("div").fadeTo(500, 0.25, function () {console.log("透明度達到0.25");});$("div").fadeTo(1000, 0.5, function () {console.log("透明度達到0.5");});$("div").fadeTo(1000, 0.75, function () {console.log("透明度達到0.75");});$("div").fadeTo(500, 1.0, function () {console.log("透明度達到1.0");});});</script> </body>

3. 展開和收起

slideDown()方法和slideUp()方法只改變元素的高度，slideUp()方法會在指定的一段時間內降低元素的高度，直到元素完全消失("display: none")。slideDown()方法則恰好相反。

3.1 slideDown()和slideUp()

slideDown() 方法用于向下滑動元素，slideUp() 方法用于向上滑動元素。

slideDown() 和 slideUp() 分別可以攜帶兩個可選參數，一個是speed參數另外一個是callback參數，兩個參數的作用和show()方法一樣。

<body><div style="width: 200px; height: 200px; background-color: yellow;"></div><button class="slideUp">向上滑動</button><button class="slideDown">向下滑動</button><script>$(".slideUp").click(function () {$("div").slideUp(1000, function () {console.log("向上滑動完成");});});$(".slideDown").click(function () {$("div").slideDown(1000, function () {console.log("向下滑動完成");});});</script> </body>

3.2 slideToggle() 方法

slideToggle() 方法可以在 slideDown() 與 slideUp() 方法之間進行切換。

如果元素向下滑動，則 slideToggle() 可向上滑動它們；如果元素向上滑動，則 slideToggle() 可向下滑動它們。

slideToggle() 可以攜帶兩個可選參數，一個是speed參數另外一個是callback參數，兩個參數的作用和show()方法一樣。

<body><div style="width: 200px; height: 200px; background-color: yellow"></div><button class="toggle">向上向下滑動切換</button><script>$(".toggle").click(function () {$("div").slideToggle(1000, function () {console.log("切換完成");});});</script> </body>

4. 自定義動畫

前面已經講了多種類型的動畫，如果這些動畫還無法滿足用戶的需求，那么就需要對動畫有更多的控制，需要采取一些高級的自定義動畫來解決這些問題。在jQuery中，我們可以使用animate()方法來自定義動畫。

4.1 animate() 方法

animate() 方法用于創建自定義動畫的函數。

語法：$(selector).animate({params}, speed, easing, callback);

linear：勻速 swing：先慢中間快后慢

自定義動畫實例：

<body><div style="width: 200px; height: 200px; opacity: 0.2; background-color: gold; position: relative;"></div><button class="animate">自定義動畫</button><script>$(".animate").click(function () {$("div").animation({// 注意: margin-top也可寫成駝峰式marginTop"margin-top": "100px","opacity": "1.0","width": "300px","height": "300px",// 注意：如果進行位置操作，則需要設置元素定位屬性值：relative、fixed或absolute"left": "100px"}, 3000, function () {console.log("自定義動畫結束");});});</script> </body>

4.2 animate() 使用隊列功能

jQuery 提供針對動畫的隊列功能，我們可以編寫多個 animate() 調用，jQuery 會創建包含這些方法調用的“內部”隊列。然后逐一運行這些 animate 調用。

<body><div class="wrap" style="width: 200px; height: 200px; background-color: gold;"></div><button class="animate">使用隊列功能</button><script>$(".animate").click(function () {// 盒子移動到右上角$("#box").animate({"top" : "10px","left" : "450px"}, 1000);// 盒子移動到右下角$("#box").animate({"top" : "450px","left" : "450px"}, 1000);// 盒子移動到左下角$("#box").animate({"top" : "450px","left" : "10px"}, 1000);// 盒子移動到左上角$("#box").animate({"top" : "10px","left" : "10px"}, 1000);});</script> </body>

4.3 jQuery插件

jQuery動畫中并不支持色彩動畫（例如背景顏色，字體顏色），如果想要生成顏色動畫，那么我們可以使用 jquery.color.js 插件來幫我們實現。

<body><div style="width: 200px; height: 200px; background-color: gold; position: relative;">我是一個DIV</div><button class="animate">自定義動畫</button><script>$(".animate").click(function () {$("div").animate({"margin-top": "100px","width": "300px","height": "300px","color": "red","background-color" : "blue","left": "100px"}, 3000);});</script> </body>

5. 停止動畫

很多時候需要停止匹配元素正在進行的動畫，那么我們可以使用stop()方法來停止動畫。

語法：$(selector).stop(stopAll, goToEnd);

| 參數 | 描述 | | :---: | :---: | | stopAll | 【可選】是否清空當前的隊列。默認值為false, 當值為true時, 表示立即清空當前的隊列，后面的動畫都不執行了。 | | goToEnd | 【可選】是否立即執行完當前動畫。默認值為false, 當值為true時，表示立即執行完當前動畫，然后再執行別的動畫。 |

停止動畫示例：

<body><div style="width: 100px;height: 100px;background-color:red;position: relative;"></div><button id="btn" style="float: right;">停止動畫</button><script>$("div").click(function () {$(this).animate({"left": "+=300px"}, 3000);$(this).animate({"top": "+=300px"}, 3000);$(this).animate({"left": "-=300px"}, 3000);$(this).animate({"top": "-=300px"}, 3000);});$("#btn").click(function () {// 表示立即停止全部動畫，原地停止$("div").stop(true, false);});</script> </body>

總結

以上是生活随笔為你收集整理的hide show vue 动画_jQuery动画效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： iPhone 12 不会自动锁屏怎么办
下一篇： html5倒计时秒杀怎么做,vue 设