CODEWITHSUNDEEP
jquerycsssliderfade
egr103
egr103

Reputation: 4008

Why is my simply cross fade not repeating?

I have a simple background image cross fader: http://jsfiddle.net/jRDkm/2/ The basis for this code was taken from here: http://snook.ca/archives/javascript/simplest-jquery-slideshow

For some reason though it does only one repetition then fades to white. How can I tweak my code so that it constantly repeats itself?

JS: 

function slideshow() {
$('#fullscreen-slider li:gt(0)').hide();
setInterval(function(){
    $('#fullscreen-slider :first-child').fadeOut()
    .next('li').fadeIn()
    .end().appendTo('#fullscreen-slider');
}, 3000);
};

Upvotes: 2

Views: 201

Answers (3)

Anujith
Anujith

Reputation: 9370

Try this : http://jsfiddle.net/jRDkm/4/

function slideshow() {
    $('#fullscreen-slider li:gt(0)').hide();
    setInterval(function(){
        $('#fullscreen-slider li:eq(0)').fadeOut()
        .next('li').fadeIn()
        .end().appendTo('#fullscreen-slider');
    }, 3000);
};

Upvotes: 0

Roko C. Buljan
Roko C. Buljan

Reputation: 206508

LIVE DEMO

/* located within plugins.js */
function fitElements() {
    $('ul#fullscreen-slider li').height( $(window).height() ).width( $(window).width() );
}

function slideshow() {
    var n = 0;
    var $LI =  $('#fullscreen-slider li');
    $LI.hide().eq(n).show();
    setInterval(function(){
        $LI.eq(n++%$LI.length).fadeTo(600,1).siblings().fadeTo(600,0);
    }, 3000);
}

$(document).ready(function() {
    fitElements();
    slideshow();
});

Upvotes: 0

iappwebdev
iappwebdev

Reputation: 5910

Your selector is wrong. Try

$('#fullscreen-slider li:first').fadeOut()
        .next('li').fadeIn()
        .end().appendTo('#fullscreen-slider');

DEMO: http://jsfiddle.net/jRDkm/5/

Upvotes: 2

Related Questions