Улучшение анимации слайдера изображения

Question

Как улучшить переход слайдера изображения. Это довольно неустойчиво. Я хочу, чтобы она была гладкой (гладкая и правильная). Проблема только в изображении fadeIn, я не могу понять, как fadeOut.

var nextimage = 0; 
var timer = 0; 
doSlideshow(); 

function doSlideshow() { 
    if (nextimage >= images.length) { 
    nextimage = 0; 
    } 
    $('.col-md-8') 
    .css('background-image', 'url("' + images[nextimage++][0] + '")') 
    .fadeIn(3000, function() { 
     timer = setTimeout(doSlideshow, 3000); 
    }); 
} 

$(".col-md-8").hover(function() { 
    clearTimeout(timer); 
}); 

$(".col-md-8").mouseout(function() { 
    setTimeout(doSlideshow, 3000); 
}); 

Pen

Answer 1

Я установил это для вас, вам не нужно SetTimeout для такого рода вещи, есть много других способов.

function doSlideshow() { 
if (nextimage >= images.length) { 
nextimage = 0; 
} 

$('.col-md-8') 
.css('background-image', 'url("' + images[nextimage++][0] + '")'); 
$('.col-md-8').hide().fadeIn(3000).fadeOut(2000, function() { 
doSlideshow() 
}); 
} 

Ссылка на codepen, есть немного больше об этом, о чем я расскажу позже.

http://codepen.io/damianocel/pen/PzQwNr

Answer 2

setInterval(function(){ 
    $("#top").fadeOut(function() { 
     $(this).attr("src","http://1.bp.blogspot.com/-cFt5KNrHsHc/TZMH6XUBu-I/AAAAAAAAAR4/R6hOP7lffx0/s1600/apple-logo.png").fadeIn().delay(1000).fadeOut(function(){ 
      $(this).attr('src', 'http://coreldrawtips.com/images/applebig.jpg').fadeIn().delay(1000); 
     }); 
    } 
    ); 
}, 400 

Check this link also.