On click of a button show a div for 1 second and then hide it?

Question

On click of a button I want to show a div for 1 Second and then hide it:

<button id="btnSave">Save Click</button>
<div class="hideme" id="infor">This is a test div</div>


  $(document).ready(function () {
  $("#infor").hide();
      $("#btnSave").click(
            function () {
                AlertSave();
            }            
        );
    });
function AlertSave() {
   $("#infor").delay(1000).fadeIn("slow");
}

This is my fiddle

Could you please tell me how to do it ??

Does this work: http://jsfiddle.net/0zdLbqa7/? – Praveen Kumar Purushothaman Dec 24 '15 at 11:35 — Praveen Kumar Purushothaman, Dec 24 '15 at 11:35
Or this : http://jsfiddle.net/adeneo/h4JXs/3282/ – adeneo Dec 24 '15 at 11:39 — adeneo, Dec 24 '15 at 11:39
Ha ha! I answered first @adeneo! – Praveen Kumar Purushothaman Dec 24 '15 at 11:40 — Praveen Kumar Purushothaman, Dec 24 '15 at 11:40

score 3 · Answer 1 · answered Dec 24 '15 at 11:36

3

You can simply chain fadeIn() and fadeOut() with a delay() call in between:

$(document).ready(function () {
    $("#infor").hide();
    $("#btnSave").click(AlertSave);
});
function AlertSave() {
    $("#infor").fadeIn("slow").delay(1000).fadeOut("slow");
}

http://jsfiddle.net/TrueBlueAussie/cjwj6gvx/

answered Dec 24 '15 at 11:36

iCollect.it Ltd

92,391
25
181
202

@PreethiJain I answered first. Kindly have a look at my answer. – Praveen Kumar Purushothaman Dec 24 '15 at 11:42
I forgot about the delay :) – Canvas Dec 24 '15 at 11:42
2

@Praveen Kumar: Your answer *as it was before I posted* did not have any of the shortcut methods I showed. Please do not try take credit away from others. Merry Christmas :) – iCollect.it Ltd Dec 24 '15 at 11:46
@TrueBlueAussie Well, yeah, but leave the shortcut aside. `:)` The first answer I posted works too. Whatever, if that's guilty, I admit. Enjoy your vote up! Merry Christmas. – Praveen Kumar Purushothaman Dec 24 '15 at 11:47

score 0 · Answer 2 · answered Dec 24 '15 at 11:50

$(document).ready(function () {
  $("#infor").hide();
      $("#btnSave").click(
            function () {
                AlertSave();
            }            
        );
    });
function AlertSave() {
   $("#infor").show();
   $("#infor").delay(1000).fadeOut();
}

I think the above piece of code will do the job , try it and let me know the outputs whether they are correct or not

Mi-Creativity · Answer 3 · 2015-12-24T13:24:46.847

I came late but, just to mention that as well as All Other answers shown there're 2 other methods..

1st Method: by making use of CSS3 animation, and using jQuery to add the class that contains animation, then remove it after the animation duration ends like in this JS Fiddle 1

var element =$('#infor');

$("#btnSave").click(AlertSave);

function AlertSave() {
 element.addClass('show-me');
  setTimeout(function () {
     element.removeClass('show-me');
  }, 2000);
}

#infor {
  opacity: 0;
}
.show-me {
  animation: foo 2s ease-in-out
}
@keyframes foo {
  0%, 99%, { opacity: 0; }
  25%, 75% { opacity: 1; }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<button id="btnSave">Save Click</button>
<div class="hideme" id="infor">This is a test div</div>

2nd Method: making use of jQuery .animate() function like this JS Fiddle 2

var element = $('#infor');
element.animate({'opacity': 0}, 0);

$("#btnSave").click(AlertSave);

function AlertSave() {
  element.animate({'opacity':1}, 300).delay(1000);
  setTimeout(function () {
     element.animate({'opacity':0}, 300);
    }, 1600);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<button id="btnSave">Save Click</button>
<div class="hideme" id="infor">This is a test div</div>

Praveen Kumar Purushothaman · Answer 4 · 2015-12-24T11:41:45.547

Use this way:

function AlertSave() {
  $("#infor").fadeIn("slow", function () {
    setTimeout(function () {
      $("#infor").fadeOut("slow");
    }, 1000);
  });
}

Fiddle: http://jsfiddle.net/0zdLbqa7/

You can also use the shorthand:

$("#infor").fadeIn("slow").delay(1000).fadeOut("slow");

Snippets for Both:

$(document).ready(function () {
  $("#infor").hide();
  $("#btnSave").click(AlertSave);
});
function AlertSave() {
  $("#infor").fadeIn("slow", function () {
    setTimeout(function () {
      $("#infor").fadeOut("slow");
    }, 1000);
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button id="btnSave">Save Click</button>
<div class="hideme" id="infor">This is a test div</div>

$(document).ready(function () {
  $("#infor").hide();
  $("#btnSave").click(AlertSave);
});
function AlertSave() {
  $("#infor").fadeIn("slow").delay(1000).fadeOut("slow");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button id="btnSave">Save Click</button>
<div class="hideme" id="infor">This is a test div</div>

Note: I would also advice you to change the .click() handler.

On click of a button show a div for 1 second and then hide it?

4 Answers4