JQuery animation with nested effects loops

Question

I have a nested function to show / hide news-ticker-style items.

The problem is that when the cycle starts (line 4), the opacity effects stop working correctly, so the paragraphs appear suddenly.

Any jquery wizards know about this? Am I doing this too hard?

$('#special-ticker p').hide(); var a=0; function outer() { function inner() { if(a===$('#special-ticker p').length) { a = 0; } $('#special-ticker p'). eq(a). fadeIn(800, function(){ $(this).animate({opacity:100},10000,null,function(){ $(this).hide(800,function(){ a++; outer(); }); }); }); } return inner(); } $(function(){ outer(); }); 

Answer 1

the problem is line 9:

 $(this).animate({opacity:100},10000,null,function(){ //... 

the opacity should be “1” (opacity is a value from 0 to 1)

 $(this).animate({ opacity : 1 }, 10000, null, function() { 

Answer 2

Try the following:

 newsticker = function (selector) { $(selector).hide(); var i = $(selector).length - 1; var toggle = function() { $(selector).eq(i).fadeOut("slow", function() { i = ++i % $(selector).length; $(selector).eq(i).fadeIn("slow", function() { setTimeout(toggle, 1000) }); }); }; toggle(); }; 

and initialize it as follows:

 new newsticker("#special-ticker p"); 

Answer 3

Solution posted, but one comment:

If a group of elements is immediately hidden, it’s faster to create a “hidden” CSS class and then assign them to these elements. It saves some javascript code, but also ensures that hidden elements do not flash briefly on the screen.

 <style type="text/css" media="screen"> .hidden { display: none; } </style> <p>Show me</p> <p class="big hidden">Use javascript to show me later.</p> 

Answer 4

A small alteration of the code to recreate jQuery instances with the same selectors. I think this is also a little easier to read.

 var jS = $('#special-ticker p'); // jS.hide(); // not needed if css hides elements initially var i = 0; function do_ticker() { jS.eq(i).fadeIn(800, function() { var me = $(this); setTimeout(function() { me.hide(800, function() { i = ++i % jS.length; do_ticker(); }); },1000); // setTimeout }); }; do_ticker();