週期間隔停止代理

一直在嘗試學習一些涉及一些簡單的HTML，CSS，JS/Jquery的網頁設計基礎知識，並且已經到了一些障礙，我一直無法找到解決方法。週期間隔停止代理

我試圖實現的一件事是旋轉一小部分div。由於缺乏一些適當的方式，我操縱的是在切換另一個隱藏頁面加載的div時，去掉其中一個。

不是最漂亮的東西，但它的作品雖然奇怪，但它只能工作兩次，因爲某些原因，循環停止工作。

function moveSide(){ 
    var intervalId; 
    var childCount = 2; 
    var preLast = childCount + 2; 
    var newLast = childCount + 3; 

    intervalId = setInterval(function() { 
     $(".column:nth-of-type(" + childCount + ")").toggle("slide", function(){ 
      $(".column:nth-of-type(" + preLast + ")").removeClass("last").delay(1, function(){ 
       $(".column:nth-of-type(" + newLast + ")").addClass("last").delay(1).toggle("slide", function(){ 
        childCount++; 
        preLast = childCount + 2; 
        newLast = childCount + 3; 
        //alert(childCount); 
       }); 
      }); 
     }); 
    },5000); 
}

我不知道，如果使用nth-of-type是正確的選擇，但它似乎讓我挑的div之中。 childCount是要選擇哪個div是第一個要切換的，pre(vious)Last用於標識顯示的最後一個div以便移除用於某些屬性的類，newLast用於標識將變爲可見的div並且給它添加CSS屬性的類。

警報週期完全運行兩次（增加childCount），但不進行第三次處理。

任何想法我做錯了什麼？

來源

2014-11-04 Komi

你想在這裏實現什麼？這是一個菜單或什麼？你能找到另一個網站的例子嗎？從外觀來看，它太複雜了。另外，你可以提供一個[JSFiddle]（http://jsfiddle.net/）或一些HTML？ – WizzHead 2014-11-04 09:01:13

它可能比它需要的更復雜，因爲我可能沒有解決這個問題，這是Jquery提供的最佳方式。我試圖在[link]（http://jsfiddle.net/yy797gjs/3/）上設置一些東西，但似乎缺少某些東西，因爲它不起作用，儘管它幾乎是我在我的網站上設置的。我真的不記得任何具體的網站使用這個，所以我不能給它作爲例子，但想法是3個div始終可見，一個切換，另一個切換從一組7個左右，和最終他們會旋轉。 – Komi 2014-11-04 10:27:02

我現在沒有，如果它是我沒有治癒感冒或事實，我剛剛幾個小時前起牀，但我不明白你的代碼。

我明白了，是你想達到什麼 - 我建議另一種方法：

$(".column:gt(0)").hide(); //first of all, hide all columns but the first one 

setInterval(function() { 
$('.column:first')    //select the first column 
    .toggle("slide")    //slide it out 
    .next().next()     //select the 3rd column 
    .toggleClass("last")   //remove class "last" 
    .next()       //select first invisible column  
    .toggleClass("last")   //add class last 
    .toggle("slide")    //slide it in 
    .end().end().end()    //end the chain, to reselect the first element 
      // since we used .next() three times, we have to end it three times 
    .appendTo('#column-content'); //move the first element inside the dom to the end 
}, 5000);

您的間隔時間應運行無限現在 - 永遠滑出第一要素，在接下來的元素末端附加滑動第一個元素結束。因此，目前的元素總是第一個... 看到小提琴：http://jsfiddle.net/sv5j85df/2/

來源

2014-11-04 09:05:19 errand

謝謝你的回覆。如果沒有別的東西，它看起來似乎是一種更簡單的方法，但是當您嘗試在粘貼時使用代碼時，第一列將在每個循環中切換。我的意圖是同時顯示3列，但我可以解決這個問題，就像第一列不斷被回叫，根據您的代碼註釋不應該發生。 – Komi 2014-11-04 10:30:31

你可以在你的代碼中發佈相關的html標記嗎？或提供一個jsfiddle？我還沒有使用切換幻燈片進行測試，但使用了fadeIn/fadeOut函數。只是想，它可能會工作 - 因爲你只是改變動畫。與jsfiddle，我可以通過控制檯檢查，如果dom得到正確處理。 – errand 2014-11-04 11:46:34

接下來的事情 - 如果你想一次顯示3列 - 切換應該如何佔用空間？你想切換所有3列顯示的列，或者只是先移出第一列，將第二列移到第一列，第三列移到第二列，第三列列出第四列列出的新列？ – errand 2014-11-04 11:48:38

週期間隔停止代理

回答

相關問題