#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    24
    Rep Power
    0

    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. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,153
    Rep Power
    183
    Take a look at the fadeIn() API and you will see documentation on how to do this.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    24
    Rep Power
    0
    Originally Posted by web_loone08
    Take a look at the fadeIn() API and you will see documentation on how to do this.
    I have been through that, tried to implement it, and also all over Google. I can get close, but not exactly the behavior I am shooting for.
  6. #4
  7. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,153
    Rep Power
    183
    Originally Posted by cm123077
    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.
    To do what your wanting to do; then you probably need to use the .fadeToggle() API. This should give you the effect, that your looking for; I missed that you were wanting it to fade out, when I first read your post.
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    24
    Rep Power
    0
    Originally Posted by web_loone08
    To do what your wanting to do; then you probably need to use the .fadeToggle() API. This should give you the effect, that your looking for; I missed that you were wanting it to fade out, when I first read your post.
    Using this, I can only get it to fade one entry, and it does not fade in initially. As you can see the way it is now, it pulls different links.
  10. #6
  11. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,153
    Rep Power
    183
    Ok, try this then and see if this is what your looking for:
    Code:
    <style>
    #ticker_holder {
    border:solid 1px #000;
    padding:0px;
    margin:0px;
    height:20px;
    overflow:hidden;
    padding:5px;
    }
    .ticker {
    width:auto;
    height:30px;
    overflow: hidden;
    margin:0px;
    padding:0px;
    list-style:none;
    }
    #ticker {
    display:none;
    margin:0px;
    padding:0px;
    }
    #ticker li {
    padding-bottom:20px;
    }
    </style>
    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    
    <div id="ticker_holder">
    <ul id="ticker" class="ticker">
    <li>
    News Ticker - Line 1
    </li>
    <li>
    News Ticker - Line 2
    </li>
    <li>
    News Ticker - Line 3
    </li>
    <li>
    News Ticker - Line 4
    </li>
    </ul>
    
    </div>
    
    <script>
    
    function tick()
    {
    $('#ticker li:first').animate({'opacity':0}, 500, function () { $(this).appendTo($('#ticker')).css('opacity', 1); });
    }
    
    setInterval(function(){ tick() }, 5000);
    
    $(document).ready(function(){
    $("#ticker").fadeIn('slow');
    });
    
    </script>
    If this is what you are wanting; then you will have to incorporate this into your other code.
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    24
    Rep Power
    0
    Got it figured out. For anyone who wants to knoe how to do it, here you go:

    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);
    		});
    	}}
    Last edited by Kravvitz; March 19th, 2013 at 11:11 PM. Reason: fixed the code tags

IMN logo majestic logo threadwatch logo seochat tools logo