jquery動畫在控制檯中工作，但不是在腳本中

我一直在爲這一整天而戰。我正在寫這個小滑塊/圖像旋轉腳本，我無法改變這些元素。我可以使用$('.slide:nth-child(1)').animate({display: 'block'});爲控制檯上的圖像製作動畫，但腳本中沒有任何內容。jquery動畫在控制檯中工作，但不是在腳本中

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等等每六秒鐘，但沒有任何變化。

來源

2016-05-29 TDave00

會建議你把一個小提琴，顯示問題。 –

不知道你可以動畫顯示屬性....但你可以做這樣的事情：https：//jsfiddle.net/pn8xv7de/ – sinisake

它從控制檯動畫。我會看你的小提琴。 – TDave00

您不能動畫display屬性。您可以動畫opacity或max-height代替：

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

來源

2016-05-29 06:39:02

謝謝。並感謝@nevermind爲小提琴。讓我朝着正確的方向前進。有寬度和高度的動畫作品。還有1個問題需要解決，這很好。 – TDave00

jquery動畫在控制檯中工作，但不是在腳本中

回答

相關問題