首頁 > 文章 > web前端 > jQuery中如何實現淡入淡出效果

jQuery中如何實現淡入淡出效果

清浅原創: 2019-02-12 14:26:013514瀏覽

jQuery中有四種方法分別為fadeIn()、fadeOut()、fadeToggle()、fadeTo()，透過這四種方法可以實現淡入淡出的效果

今天要分享的是如何透過jQuery來實現淡入淡出的效果，具有一定的參考作用，希望對大家有所幫助

jQuery中如何實現淡入淡出效果

【教程推薦：jQuery教學】

jQuery有四種fade方法，分別是fadeIn()、fadeOut()、fadeToggle()、fadeTo()接下來在文章中將為大家具體介紹這幾種方法如何實現淡入淡出效果

fadeIn()方法

#主要用於淡入已隱藏的元素，它有兩個參數分別為:

speed ：表示效果的時長，可取「slow" ,"fast」或自訂的時間值。它是可選參數

callback :表示淡入效果完成後所執行的函數名稱

#fadeOut() 方法

主要用於淡出可見元素，它的參數值與fadeIn的值一樣

fadeToggle() 方法

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

如果元素已淡出，則fadeToggle() 會在元素中加入淡入效果

如果元素已淡入，則fadeToggle() 會在元素中加入淡出效果

fadeTo() 方法

fadeTo() 方法允許漸變為給定的不透明度（值介於0 與1 之間）

fadeTo方法中除了包含speed和callback函數以外，還多了一個必需的opacity 參數，目的在於將淡入淡出效果設定不透明度

實例分享:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    #img{
      width:300px;
      height:200px;
      position: absolute;
      top:40px;
    }
    button{
      position: absolute;
      top:10px;
    }
  </style>
</head>
<body>
  <script src="./jquery/jquery-1.12.4.js"></script>
  <script>
  $(document).ready(function(){
  $("button").click(function(){
   $("#img").fadeToggle(3000).fadeTo(0.5);
  });
});
</script>
<button>点击</button>
<img  src="./images/22.jpg" id="img" alt="jQuery中如何實現淡入淡出效果" >
</body>
</html>

效果圖：

jQuery中如何實現淡入淡出效果

總結：以上就是這篇文章的全部內容了，希望透過這篇文章可以幫助大家學會如何透過jQuery來實現淡入淡出效果

附註：本篇文章參考jQuery教學手冊中的#jQuery淡入淡出一節

以上是jQuery中如何實現淡入淡出效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：find方法怎麼使用下一篇：find方法怎麼使用

看更多