SetInterval無法使用JQuery動畫

Question

我正在嘗試創建一個滑塊。 滑塊不起作用，我不知道為什么。 它僅被調用一次。

animate方法僅被調用一次。 我記錄了對Interval的調用，已調用了時間間隔，但是第一次之后沒有調用動畫

更新：我已經通過設置解決了問題

'margin-left'：animate方法中的-='600px'

謝謝大家的幫助

**

Slider2.js CSS和HTML

 function(){ var sliderUL = $('div.slider').css('overflow','hidden').children('ul'), imgs = sliderUL.find('img'), imgWidth = imgs[0].width, imgLen = imgs.length; current = 1; total_img_width = imgLen * imgWidth; setInterval(function(){ console.log("log invoked"); sliderUL.delay(1000).animate({'margin-left': '-600px'},1000); },3000); })();

 .slider { width: inherit; height: 300px; overflow: hidden; } .slider ul { /* width:10000px; */ list-style: none; display:flex; } .slider li { float: left; }

 <!doctype html> <html> <head> <meta charset=utf-8> <title>The Obligatory Slider</title> <style> body { width: 600px; margin: 100px auto 0; } * { margin: 0; padding: 0; } </style> <link rel="stylesheet" href="slider.css"> </head> <body> <div class="slider"> <ul> <li><img src="img/img1.jpg" alt="image"></li> <li><img src="img/img2.jpg" alt="image"></li> <li><img src="img/img3.jpg" alt="image"></li> <li><img src="img/img4.jpg" alt="image"></li> <li><img src="img/img5.jpg" alt="image"></li> </ul> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="slider.js"></script>

Answer 1

我認為，在第一個動畫之后，您不會更改對象的邊距。 雖然具有相同的邊距，但不是動畫。 在動畫完成回調中，將對象重置或重新設置對象的原始邊距位置。

Answer 2

不確定您的代碼打算什么，但是我可以告訴您它在做什么...我懷疑這是您想要的東西...

您將獲取父<ul>元素本身，並每3秒重復將其left-margin動畫為-600px 。 而且，當然，第一次之后它已經是 -600px ...因此-600px和-600px之間的動畫在視覺上並不是特別引人注目...

實際上，似乎沒有任何邏輯可以捕獲每個單獨的圖像並對其進行動畫處理，移至下一個圖像，對其進行動畫處理（例如，典型的滑塊所做的操作）。 你似乎作出的圖片（實際單變量imgs ），該列表（長度imgLen ），並宣布一個變種，用於跟蹤你在（什么指數current ）......這一切數據滑塊需要使用...但是您實際上並沒有做任何將數據變成滑塊的操作。

不幸的是，滑條不起作用的原因是您沒有編寫任何實際上可以構成滑條的代碼。 這不是我們可以指出並修復的簡單錯誤的問題……根本沒有代碼可以在該程序中創建滑塊。

Answer 3

實際上，問題出在您的代碼中，您始終設置為'margin-left': '-600px'因此即使執行，其邊距也保持不變。 我已經修改了一點代碼，現在可以正常工作了。

var count = 1;
(function(){
    var sliderUL = $('div.slider').css('overflow','hidden').children('ul'),
    imgs = sliderUL.find('img'),
    imgWidth = imgs[0].width,
    imgLen = imgs.length;
    current = 1;

    total_img_width = imgLen * imgWidth;
    setInterval(function(){
        console.log("log invoked");
        sliderUL.delay(1000).animate({'margin-left': '-'+(count*600)+'px'},1000);
        count = (count+1)%5;
        if(count == 0)
           count++;
    },3000);

})();

查看小提琴

SetInterval無法使用JQuery動畫

問題描述

更新：我已經通過設置解決了問題

謝謝大家的幫助

3 個解決方案

解決方案1
0 2016-01-02 22:19:07

解決方案2
0 2016-01-02 22:53:08

解決方案3
0 已采納 2016-01-02 23:49:10

SetInterval無法使用JQuery動畫

問題描述

更新：我已經通過設置解決了問題

謝謝大家的幫助

3 個解決方案

解決方案1 0 2016-01-02 22:19:07

解決方案2 0 2016-01-02 22:53:08

解決方案3 0 已采納 2016-01-02 23:49:10

解決方案1
0 2016-01-02 22:19:07

解決方案2
0 2016-01-02 22:53:08

解決方案3
0 已采納 2016-01-02 23:49:10