CODEWITHSUNDEEP
jqueryfadeinfadeout
Simo Mafuxwana
Simo Mafuxwana

Reputation: 3762

jQuery Slider FadeIn()

Am working on a banner with fadeIn/fadeOut transition. Its simple realy. On intervals the images change randomly. All that works fine.

The issue is with the fadeOut part. the current displayed image wont fade out. ANY SUGGESTIONS :) ?

any if there's any kind beings out there who can give tips on how to refactor the js code for me.... am still a junior and for this project i did not want to use any plugins.

$(function () {

        var myPix = [ 'img/1.jpg', 'img/2.jpg', 'img/3.jpg', 'img/4.jpg', 'img/5.jpg', 
                                    'img/6.jpg', 'img/7.jpg', 'img/8.jpg', 'img/9.jpg', 'img/10.jpg',
                                    'img/11.jpg', 'img/12.jpg', 'img/13.jpg' 
                                ],
                randomNum = Math.floor(( Math.random() * myPix.length )),
                aa = '<img src="' + myPix[randomNum] + '" />';

        $('header').append($(aa).fadeIn(1000));

        setInterval( function () {
            var myPix = [ 'img/1.jpg', 'img/2.jpg', 'img/3.jpg', 'img/4.jpg', 'img/5.jpg', 
                                        'img/6.jpg', 'img/7.jpg', 'img/8.jpg', 'img/9.jpg', 'img/10.jpg',
                                        'img/11.jpg', 'img/12.jpg', 'img/13.jpg' 
                                    ],
                    randomNum = Math.floor(( Math.random() * myPix.length )),
                    aa = '<img src="' + myPix[randomNum] + '" />';

        $('header img').fadeOut(5000).replaceWith($(aa).fadeIn(2000));

        }, 6000);

});

http://jsfiddle.net/simomultimedia/vVyph/

Upvotes: 0

Views: 368

Answers (3)

cy3er
cy3er

Reputation: 1699

Put the fade in in the complete function of the fade out, so it will only be started after the fade out:

$('header').append($(aa).fadeIn(1000));
    setInterval( function () {
        randomNum = Math.floor(( Math.random() * myPix.length )),
        source = "http://nunstoprecords.co.za/"+myPix[randomNum];
        $('header img').fadeOut(2000, function() {$('header img').attr("src",source).fadeIn(2000)});
    }, 5000);

Also, if you want to fade in and out them at the same time use two image container.

Upvotes: 0

Lazarus Lazaridis
Lazarus Lazaridis

Reputation: 6029

Use the following:

 $('header img').fadeOut(5000, function(){$(this).replaceWith($(aa).fadeIn(2000))});

Upvotes: 1

billyonecan
billyonecan

Reputation: 20250

Put the fadeIn() inside of the fadeOut() callback function:

$('header img').fadeOut(5000, function() {
    $(this).replaceWith($(aa).fadeIn(2000));
});

Updated fiddle

Upvotes: 2

Related Questions