On button click fade in fade out

Question

i have button <input type="submit" id="btnApply" name="btnApply" value="Apply"/>

when button click it show a div

<div>
Thanks for apply
</div>

should be fade in

after 5 seconds it should fade out

Answer 1

check the animation css properties.when button clicked show the div and apply the animation css. check the animation-fill-mode css property. You can use the value of both. specify the 0% as opacity 0, 50% as opacity 1 and back to 100% at opacity 0. Use a animation-duration property and set it to 5 seconds. Try something along the above lines..

Pankaj

Answer 2

I think you need to use JQuery, Mention some ID to your div as <div id="div1" > . With Jquery it's pretty simple:

<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>

In above code, when button is clicked div1 is fade in with 2 seconds and after 3 seconds delay it will fade out in 2 seconds.