CODEWITHSUNDEEP
phpjavascriptjqueryhtmlcss
goddamnyouryan
goddamnyouryan

Reputation: 6906

Display a page element for a set period of time

quick question. I am trying to use either javascript, jquery, or php to make it so when I click a link, it replaces a static image on my page with another image, for 15 seconds, then reverts back to the original image. What would be the best way to go about this?

Upvotes: 1

Views: 1156

Answers (1)

Nick Craver
Nick Craver

Reputation: 630579

You could do a simple timeout for this:

$('#myLink').click(function() {
  $('#myImg').attr('src', 'newImg.jpg');
  setTimeout(function() { $('#myImg').attr('src', 'oldImg.jpg'); }, 15000);
});

Alternatively, if you wanted a fade, have the other image absolutely positioned, like this:

<div>
 <img id="tempImg" src="tempImg.jpg" style="position:absolute; display:none; z-index: 2;" />
 <img src="oldImg.jpg" />
</div>

Then jQuery like this:

$('#myLink').click(function() {
  $('#tempImg').fadeIn().delay(15000).fadeOut();
});

Make sure the images have the same dimensions(for looks, this is optional), the temp image will fade in on top of the static image, wait 15 seconds, then fade out.

Upvotes: 6

Related Questions