在按鈕上單擊淡入淡出

Question

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

當按鈕點擊它顯示一個div

<div>
Thanks for apply
</div>

應該淡入

5 秒后它應該淡出

Answer 1

檢查動畫 css 屬性。單擊按鈕時顯示 div 並應用動畫 css。 檢查 animation-fill-mode css 屬性。 您可以使用兩者的值。 將 0% 指定為不透明度 0，將 50% 指定為不透明度 1，並在不透明度 0 時返回 100%。使用 animation-duration 屬性並將其設置為 5 秒。 嘗試按照上述方式進行操作..

潘卡伊

Answer 2

我認為您需要使用 JQuery，在您的 div 中提及一些 ID 作為<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 秒內淡出。