在淡入點擊按鈕淡出

Question

我有按鈕<input type="submit" id="btnApply" name="btnApply" value="Apply"/>

當按鈕點擊它顯示一個div

<div> 
Thanks for apply 
</div> 

應該淡入

5秒鐘後它應該淡出

Answer 1

我認爲你需要使用jQuery，提一些ID您DIV爲<div id="div1" >。與jQuery它很簡單：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
    <script> 
    $(document).ready(function(){ 
     $("button").click(function(){ 
      $("#div1").fadeIn(2000); 
      $('#div1').delay(3000).fadeOut(2000) 
     }); 
    }); 
    </script> 

在上面的代碼中，當按鈕被點擊DIV1與2秒淡入和後3秒延時將在2秒內淡出。

Answer 2

檢查動畫CSS屬性。當按鈕單擊顯示div並應用動畫CSS。 檢查animation-fill-mode css屬性。您可以使用兩者的值。 指定0％爲不透明度0，50％爲不透明度1，在不透明度0爲100％。 使用animation-duration屬性並將其設置爲5秒。 嘗試沿着上述路線的東西..

潘卡