making fadeIn and fadeOut effect work smootly in jquery

Question

I have a page where my image will fade in and fadeout effects are there.. The fadein option seems to be some issue as it happens immediatley... Please find my jsfiddle.

Please help

Answer 1

Two things, first fadeIn() only runs on hidden elements so you need to hide your images initially, second you need to wait for the fadeOut() animation to complete before animating the next image. This code should work for you, I removed the interval and the count variable:

var $slideshowImgs = $('.slideshow img').hide();
(function fadeSlideshow ($img){
    var $next = $img.next();
    if(!$next.length)
        $next = $slideshowImgs.first();
    $img.delay(2000).fadeOut(function(){
        $next.fadeIn();
        fadeSlideshow($next);
    });
})($slideshowImgs.first().show());

Demo fiddle

Answer 2

check this js fiddle http://jsfiddle.net/TXrDk/2/

use

transition:.5s ease-in-out;