Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Fade in jquery div show

I am trying to get the below script to fade in and fade out with a delay in between. It shows the div correctly and fades out as it should, but it doesn't fade in?

<?php
if(isset($_GET['updated'])) { ?>
<div id='updated'><p>The product was successfully added to your Shopping Cart</p></div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$('#updated').fadeIn(800).delay(3000).fadeOut(800)
</script>
<?php } ?>

Many thanks!

like image 367
Pete Naylor Avatar asked Apr 18 '13 09:04

Pete Naylor


People also ask

How do you fadeOut in jQuery?

The jQuery fadeOut() method is used to fade out a visible element. Syntax: $(selector).fadeOut(speed,callback); The optional speed parameter specifies the duration of the effect.

What is the difference between fadeIn and show in jQuery?

Main difference between FadeIn, FadeOut vs hide, Show is When you use FadeIn and fadeout Its remove line Slowly Like Opacity will 100 to 0 in a few mili-second but On other hand hide, Show will remove the line immediately Without wasting any mili-second.

Which are the jQuery fading methods?

jQuery example: fadeIn(), fadeOut(), and fadeToggle() This is an example using jQuery's fadeIn() , fadeOut() , and fadeToggle() methods to change the visibility of elements on the page with a fading effect.


1 Answers

$('#updated').hide().fadeIn(800).delay(3000).fadeOut(800);

You could also set it in the css:

#updated{
  display: none;
}

The problem is - it's already visible (by default).

like image 196
ahren Avatar answered Sep 22 '22 17:09

ahren