Jquery animate работает в консоли, но не в скрипте

Question

Я весь день бил головой об этом. Я пишу этот маленький скрипт с ползунком/изображением, и я не могу заставить его изменить эти элементы. Я могу анимировать изображения с консоли с $('.slide:nth-child(1)').animate({display: 'block'});, но ничего из сценария.

HTML

<div id="main"> 
    <div class="wrapper"> 
     <div class="slider"> 
      <div class="slide"> 
       <img src="/_site/images/interior-decor.jpg" /> 
      </div> 
      <div class="slide"> 
       <img src="/_site/images/Showhome-Living-Room.jpg" /> 
      </div> 
      <div class="slide"> 
       <img src="/_site/images/SL-Master-bedroom-1.jpg" /> 
      </div> 
     </div> 
    </div> 
</div> 

Javascript

var sl = {} || []; 
sl.imgs = $('.slide'); 
sl.cnt = 1; 
sl.wait = 6000; 
sl.num = sl.imgs.length; //count length of .slide divs 
//hide all but first image 
$('.slide:nth-child(n + 2)').css('display', 'none'); 
// 
sl.func = function() { 
    var prev = sl.cnt; 
    sl.cnt++; 
    var next; 
    if (sl.cnt > (sl.num)) { 
     sl.cnt = 1; 
     next = 1; 
    } 
    else {next = sl.cnt;} 

    $('.slide:nth-child(' + next + ')').animate({display: 'block'}); 
    $('.slide:nth-child(' + prev + ')').animate({display: 'none'}); 
    console.log('Previous: '+prev+' Next: '+next); 
}; 
window.setInterval(function() { 
    sl.func() 
}, sl.wait); 

Сценарий утешает из Previous: 1 Next: 2 и так далее каждые шесть секунд, но ничего не меняется.

Answer 1

Вы не можете оформить недвижимое имущество display. Вы можете анимировать opacity или max-height вместо:

$('.slide:nth-child(' + next + ')').animate({opacity: 1}) 
$('.slide:nth-child(' + prev + ')').animate({opacity: 0});