Fade in jquery div show

Question

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!

score 7 · Answer 1 · answered Apr 18 '13 at 09:19

7

$('#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).

answered Apr 18 '13 at 09:19

ahren

16,803
5
50
70

score 7 · Answer 2 · answered Apr 18 '13 at 09:21

7

its because its already showing

<div id='updated' style="display:none">

fixes it

answered Apr 18 '13 at 09:21

dt192

1,003
7
12

score 6 · Answer 3 · answered Apr 18 '13 at 09:19

You have to hide div before fadeIn(), you can use hide() method to hide the div.

<?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').hide().fadeIn(800).delay(3000).fadeOut(800)
</script>
<?php } ?>

Fade in jquery div show

3 Answers3