Time delay on element with fadeToggle()?

Question

What's the best way to set a time delay on an element for it to display for a certain time, but with a fade-in and fade-out effect upon appearing and disappearing? Can this be done with the fadeToggle() function in jQuery?

The example of my current application: http://loremipsum.li

...when you click the 'Copy' button it copies the text to the clipboard and brings up the "Copied!" caption, but without any transition effects, which is what I am trying to achieve.

Any thoughts?

score 5 · Answer 1 · answered Apr 08 '13 at 19:22

5

You can use jQuery's delay():

$(this).fadeToggle().delay(500).fadeToggle()

Time is in milliseconds.

delay: http://api.jquery.com/delay/

answered Apr 08 '13 at 19:22

Alfred Xing

4,406
2
23
34

score 1 · Answer 2 · answered Apr 08 '13 at 19:22

1

Here ya go.

http://jsfiddle.net/astynax777/wxRRS/

$('#foo').delay(3000).fadeIn('slow').delay(3000).fadeOut('slow');

answered Apr 08 '13 at 19:22

Zach

3,157
1
19
32

swapnesh · Answer 3 · 2013-04-08T19:36:32.403

U can also try something like this -

Fiddle - http://jsfiddle.net/swapnesh/wkhPS/

Check for the parameters in .fadeToggle( [duration ] [, easing ] [, complete ] ) method http://api.jquery.com/fadeToggle/

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $(".copy").show().fadeToggle(3000);
  });
});
</script>
</head>
<body>

<div class="copy" style="display:none;">copied!!</div>
<button>Copy</button>


</body>
</html>

Time delay on element with fadeToggle()?

3 Answers3