Link to home
Start Free TrialLog in
Avatar of allanch08
allanch08Flag for United Kingdom of Great Britain and Northern Ireland

asked on

JQuery timed image swap

Hello experts!

Can someone tell me how I can swap an image with another for a set amount of time when a button is clicked using JQuery. I've managed to show an image for a set amount of time but swapping has deluded me? Thanks
<script type="text/javascript">
$(document).ready(function(){
	$('#click_to_load').click(function(){
		$('#loader').show(0).delay(500).hide(0);
		return false;
	});
});
</script>

Open in new window

Avatar of amit_g
amit_g
Flag of United States of America image

It would be easier if corresponding HTML was also posted. What is #loader? A way would be to have two of those and show one and hide another after the set delay.

<script type="text/javascript">
$(document).ready(function(){
      $('#click_to_load').click(function(){
            $('#loader1').hide(0).delay(500).show(0);
            $('#loader2').show(0).delay(500).hide(0);
            return false;
      });
});
</script>
Avatar of allanch08

ASKER

Hello,

#loader is the id of the div containing the image. so basically clicking the button with id of click_to_load shows the div with id ="loader".
<div id="loader">
    <img src="images/loading.gif" alt="Loading...">
</div><!-- end div -->

Open in new window

<div id="loader">
    <img id="img1" src="http://www.google.com/images/firefox/firefox1.png" alt="Loading...">
    <img id="img2" src="http://www.google.com/images/firefox/sync-addon.png" alt="Loading..." style="display:none">
</div><!-- end div -->


<script type="text/javascript">
$(document).ready(function(){
      $('#click_to_load').click(function(){
            $('#loader')..show(0);
            setTimeout("$('#loader img').toggle();", 3000);
            return false;
      });
});
</script>
thanks, can you tell me how to get it to revert back to the original image again after the second image is shown?
ASKER CERTIFIED SOLUTION
Avatar of amit_g
amit_g
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
cool, thanks for your help amit_g! much appreciated!