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
    Aug 2012
    Posts
    83
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Change animate to fade in/fade out with delay

    I am very new to JQuery, as far as coding goes. I have some code that slides some content in from right to left, seen here:

    http://biostreamcompost.com/press/


    I want this to fade in, stay visible for a short time, then fade back out, then the next piece of content does the same, forever. I have tried to change the code with little success. At this point, I am asking for some help so I can see how this is done, which will help me out a lot in the future.

    Here is an example of how this should look (small "more news" section below the image)

    http://fiverr.com/news

    And, the code I am working with:

    Code:
    // start the rotation interval
    	if(auto_rotate)
    	 var rotatorInterval = setInterval(function(){wppr_interval()},post_rotator_speed);
    	
    	// next slide
    	function wppr_interval(){
    	  r_pointer++;
    	  if(r_pointer == post_rotator_arr.length)
    	  {
    	    r_pointer = 0;
    	    $("#rotator_prop").animate({"left":"0"},500);
    	  }
    	  else
    	    $("#rotator_prop").animate({"left":"-=100%"},250);
    	}
    	
    	// previous slide
    	function wppr_back(){
    	  r_pointer--;
    	  if(r_pointer < 0)
    	  {
    	   r_pointer = post_rotator_arr.length - 1;
    	   var to_last_rotater = "-=" + (100 * (r_pointer)) + "%";
    	   $("#rotator_prop").animate({"left" : to_last_rotater},500);
    	  }
    	  else
    	    $("#rotator_prop").animate({"left" : "+=100%"},500,
    		function(){
    		  if(auto_rotate)
    		    rotatorInterval = setInterval(function(){
    			  wppr_interval()},post_rotator_speed);
    		});
    	}
    There is more code int he file (not too much), but I believe this is the bit that I need to focus on. Please help me out, if you can.

    Thanks

  • #2
    New Coder
    Join Date
    Aug 2012
    Posts
    83
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Any thoughts on this? Nothing I have tried since the post has worked without some type of issue.

  • #3
    New Coder
    Join Date
    Aug 2012
    Posts
    83
    Thanks
    4
    Thanked 0 Times in 0 Posts
    figured it out. Here is the solution.

    Code:
    // start the rotation interval
    	if(auto_rotate)
    	 var rotatorInterval = setInterval(function(){wppr_interval()},post_rotator_speed);
    	
    	// next slide
    	function wppr_interval(){
    	  r_pointer++;
    	  if(r_pointer == post_rotator_arr.length)
    	  {
    	    r_pointer = 0;
    	    $("#rotator_prop").fadeOut(200);
    	    $("#rotator_prop").delay(200).animate({"left":"0"},500, function(){
    		$(this).fadeIn(200);
    	    });
    	  }
    	  else {
    	    $("#rotator_prop").fadeOut(200);
    	    $("#rotator_prop").animate({"left":"-=100%"},250, function(){
    		$(this).fadeIn(200);
    	    });
    	}}
    
    	// previous slide
    	function wppr_back(){
    	  r_pointer--;
    	  if(r_pointer < 0)
    	  {
    	   r_pointer = post_rotator_arr.length - 1;
    	   var to_last_rotater = "-=" + (100 * (r_pointer)) + "%";
    	   $("#rotator_prop").fadeOut(200);
    	   $("#rotator_prop").delay(200).animate({"left" : to_last_rotater},500, function(){
    		$(this).fadeIn(200);
    	   });
    	  }
    	  else {
    	    $("#rotator_prop").fadeOut(200);
    	    $("#rotator_prop").delay(200).animate({"left" : "+=100%"},500,
    		function(){
    		  $(this).fadeIn(200);
    		  if(auto_rotate)
    		    rotatorInterval = setInterval(function(){
    			  wppr_interval()},post_rotator_speed);
    		});
    	}}


  •  

    Posting Permissions

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