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 2 of 2
  1. #1
    New Coder
    Join Date
    Jul 2010
    Posts
    19
    Thanks
    2
    Thanked 0 Times in 0 Posts

    newsticker-jquery

    hi,
    i was looking for a effect like http://twitter.com/. finally i found it.

    this is the demo which i found http://woorktuts.110mb.com/newstickerjq/index.html

    but i have massive problem, that it is not smoother like twitter.
    when top image disappear, other images are come-up. may this move up be smooth like twitter, it'll great. this is the javascript
    Code:
    <script type="text/javascript">
    $(document).ready(function(){
    	
    	var first = 0;
    	var speed = 700;
    	var pause = 3500;
    	
    		function removeFirst(){
    			first = $('ul#listticker li:first').html();
    			$('ul#listticker li:first')
    			.animate({opacity: 0}, speed)
    			.fadeOut('slow', function() {$(this).remove();});
    			addLast(first);
    		}
    		
    		function addLast(first){
    			last = '<li style="display:none">'+first+'</li>';
    			$('ul#listticker').append(last)
    			$('ul#listticker li:last')
    			.animate({opacity: 1}, speed)
    			.fadeIn('slow')
    		}
    	
    	interval = setInterval(removeFirst, pause);
    });
    
    </script>
    Please can any one help me? Grateful for any help!

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    this seems to work. not super smooth but, I think that has a lot to do with the speed settings.

    Code:
    <script type="text/javascript">
    $(document).ready(function(){
    	
    	var first = 0;
    	var speed = 700;
    	var pause = 3500;
    	
    		function removeFirst(){
    			first = $('ul#listticker li:first').html();
    			$('ul#listticker li:first')
    			.animate({opacity: 0}, speed)
    			.fadeOut('slow', function() {
    				$(this).animate({'height': '0px'}, 300, function(){
    					$(this).remove();
    				});
    			});
    			addLast(first);
    		}
    		
    		function addLast(first){
    			
    			last = '<li style="display:none">'+first+'</li>';
    			$('ul#listticker').append(last)
    			$('ul#listticker li:last')
    			.animate({opacity: 1}, speed)
    			.fadeIn('slow')
    		}
    	
    	interval = setInterval(removeFirst, pause);
    });
    </script>
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis


  •  

    Posting Permissions

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