Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Nov 2010
    Posts
    87
    Thanks
    13
    Thanked 3 Times in 3 Posts

    using jQuery setInterval on 3 images going up and down the DOM

    I'm trying to have 3 images cycle for a convertible car. I am trying to use setInterval to start with the 1st image(top-down) and go through to the 2nd (top-going-up) to the 3rd(top-up) then back to the 2nd then back to the 1st. so the sequence is 1,2,3,2,1,2,3,2,1 continuously. the html is simple enough:

    Code:
    <div class="car">
    			<img src="img/1.jpg">
    			<img src="img/2.jpg">
    			<img src="img/3.jpg">
    		</div>
    the script is:
    Code:
    var count = 1,
    					maxIndex = 2;
    										
    				 setInterval(function(){
    					// check if last vehicle image is visible
    					if (count == 0) {
    						$('.car').children('img').eq(maxIndex).fadeTo(1500, 0, function() { $(this).hide(); });
    					}			
    					else {
    					
    						$('.car').children('img').eq(count)
    							.fadeTo(0, 0)
    							.show()
    							.fadeTo(1500, 1, function() {
    								if (count > 1) {
    									$('.car').children('img').eq(count-1).fadeTo(0, 0).hide();
    								}
    							});  
    					}
    					count = (count >= maxIndex) ? 0 : count+1;
    				}, 3000);
    I've kinda been stuck on this for a couple days now and I thought this would be simple! Any help is much appreciated. If I find a solution I'll be sure to post it in here for anyone in the future
    Last edited by joanzn; 11-19-2012 at 02:21 PM.

  2. #2
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    Washington
    Posts
    6,424
    Thanks
    30
    Thanked 878 Times in 876 Posts
    You add your fades. This is to display the images
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>New document</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    var count = 1,
    var int=self.setInterval(function(){show()},3000);
    
    function show()
    {
    
    	if(count == 1){
    		$("#two").css("display", "none");
    		$("#three").css("display", "none");
    		$("#one").css("display", "block");
    
    	}else if(count == 2 || count == 4){
    		$("#one").css("display", "none");
    		$("#three").css("display", "none");
    		$("#two").css("display", "block");
    	}else if(count == 3){
    		$("#one").css("display", "none");
    		$("#two").css("display", "none");
    		$("#three").css("display", "block");
    	}
    	count++;
    	if(count == 5) count = 1;
    }
    </script>
    <style type="text/css">
    #one, #two, #three{
    	display:none;
    }
    </style>
    </head>
    
    <body>
    
    <div class="car">
    	<img id="one" src="img/1.jpg">
    	<img id="two" src="img/2.jpg">
    	<img id="three" src="img/3.jpg">
    </div>
    </body>
    </html>

  3. Users who have thanked sunfighter for this post:

    joanzn (12-03-2012)

  4. #3
    New Coder
    Join Date
    Nov 2010
    Posts
    87
    Thanks
    13
    Thanked 3 Times in 3 Posts
    Simplest is best. Thanks for the reminder!


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •