Jqueryアニメートはコンソールでは動作しますが、スクリプトでは動作しません

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を慰めなど6秒ごとに、何も変わりません。

Answer 1

displayプロパティをアニメーション化することはできません。代わりにopacityかmax-heightをアニメーション化することができます

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