CODEWITHSUNDEEP
jquerycyclehtmltiming
martinpetro
martinpetro

Reputation: 49

jQuery timing / cycling delays

I need to make some kind of a short "newsflash" on my site... Fading in and out some `s and need them to cycle...

So far I`ve got something like this :

$('.text01').hide().fadeIn('slow').delay(3000).fadeOut('slow');
$('.text02').hide().delay(4000).fadeIn('slow').delay(3000).fadeOut('slow');
$('.text03').hide().delay(8000).fadeIn('slow').delay(3000).fadeOut('slow');
$('.text04').hide().delay(12000).fadeIn('slow').delay(3000).fadeOut('slow');

This however does not cycle and I`m a real newbie so any help will be appreciated.

Upvotes: 2

Views: 218

Answers (6)

Sergei Zahharenko
Sergei Zahharenko

Reputation: 1524

here is another one :)

function flow(elem){
    el = $(elem);
    el.fadeIn('slow').delay(3000).fadeOut('slow', function(){
        nextElem = el.is(':last-child') ? el.siblings(':eq(0)') : el.next();
        flow(nextElem);
    });
}
$(document).ready(function(){
    flow('span:eq(0)')
})

Demo at JSFiddle

Upvotes: 0

Timm
Timm

Reputation: 12753

You should create one div in your page:

<div id='newsticker'></div>

Then put all your news stories in an array and run this function which calls itself:

var newsItems = ['England will win Euro 2012','Pigs will fly by 2030','Third news story','Final news story'];

function displayNews(itemID){
    $('#newsticker').html(newsItems[itemID]);
    $('#newsticker').fadeIn('slow',function(){
        $('#newsticker').delay(4000).fadeOut('slow', function(){
            itemID++;
            if (itemID == newsItems.length){
                itemID = 0;
            }
            displayNews(itemID);            
        });
    });
}

//Start off the news ticker
displayNews(0);

See a Working DEMO here

Upvotes: 1

romo
romo

Reputation: 1990

I created a function like this one time. Obviously you would have to wrap your content in a <li> for it to work...but maybe it gives you an idea.

function liRotator() { 
var liprev = $("ul.rotator li:first-child");
$(liprev).each(function(g) {
  $(this).delay(g*1600).slideUp(function() {
    $(this).appendTo(this.parentNode).slideDown();
  });
});

}

Upvotes: 0

cereallarceny
cereallarceny

Reputation: 4983

From what I can tell, you might be looking at something like a content slider. I'd try something like Nivo Slider. It's a jQuery plugin which you can easily implement and I prefer it because it gives you the ability to skin every aspect of it using CSS, as well as keep your source code to a minimum. It also supports a lot of callback functions as well as transitions.

Upvotes: 0

iappwebdev
iappwebdev

Reputation: 5910

Have a look at this fiddle, it works: http://jsfiddle.net/7gpYB/3/

Upvotes: 0

Huangism
Huangism

Reputation: 16448

Assuming what you have behaves the way you want, you can put them in a function and call that function on a time interval

setInterval(your_function_name, time_in_milliseconds);

Upvotes: 0

Related Questions