jQuery loop - setTimeout，addClass，removeClass

對於JavaScripters，我將是一個簡單的方法。我有很長的研究，但我找不到正確的答案。我想要一個菜單（基本上只是錨點而不是列表元素）像具有特定時間延遲的滑塊一樣高亮顯示。jQuery loop - setTimeout，addClass，removeClass

另外，如果你知道如何擺脫所有這些無用的ID（「＃menu a」）和$（this），這將是很好的。由於我不能做很多JavaScript（儘管我更喜歡簡單），下面是我在jQuery中的糟糕代碼，它可以工作，但它不是循環的。

$("#anchor1").addClass("highlight"); 

function loopMenu() { 
    window.clearTimeout(); 
    setTimeout(function(){$("#anchor1").removeClass("highlight");}, 4000); 
    setTimeout(function(){$("#anchor2").addClass("highlight");}, 4000); 
    setTimeout(function(){$("#anchor2").removeClass("highlight");}, 8000); 
    setTimeout(function(){$("#anchor3").addClass("highlight");}, 8000); 
    setTimeout(function(){$("#anchor3").removeClass("highlight");}, 12000); 
    setTimeout(function(){$("#anchor4").addClass("highlight");}, 12000); 
    setTimeout(function(){$("#anchor4").removeClass("highlight");}, 16000); 
    setTimeout(function(){$("#anchor1").addClass("highlight");}, 12000); 
} 

loopMenu();

我想要什麼：一個腳本，從當前元素和addClass消除類以每4秒下一個錨式元素，然後跳轉到第一個元素，永遠重複。

Here is a solved question與此有一些關係，雖然我不能讓它工作。

來源

2013-05-14 danielnagy

延遲或隊列怎麼樣 – mplungjan 2013-05-14 14:59:31

你需要在4秒後發生所有其他迭代後再次執行loopMenu。 – 2013-05-14 15:00:21

類似：

$(function() { 
    var $anchors = $('.anchor'); 

    (function _loop(idx) { 
    $anchors.removeClass('highlight').eq(idx).addClass('highlight'); 
    setTimeout(function() { 
     _loop((idx + 1) % $anchors.length); 
    }, 4000); 
    }(0)); 
});

有：

<a class="anchor">A</a> 
<a class="anchor">B</a> 
<a class="anchor">C</a> 
<a class="anchor">D</a> 
<a class="anchor">E</a> 
<a class="anchor">F</a> 
<a class="anchor">G</a>

http://jsbin.com/oselux/1/

來源

2013-05-14 15:08:48 Yoshi

完美的作品，正是我在尋找的，謝謝！ – danielnagy 2013-05-14 15:17:21

這很好。謝謝。 – user1429980 2013-08-09 21:35:21

只需在20秒後執行loopMenu繼續。

$("#anchor1").addClass("highlight"); 
function loopMenu(){ 
    //window.clearTimeout(); what was this for? 
    setTimeout(function(){$("#anchor1").removeClass("highlight");}, 4000); 
    setTimeout(function(){$("#anchor2").addClass("highlight");}, 4000); 
    setTimeout(function(){$("#anchor2").removeClass("highlight");}, 8000); 
    setTimeout(function(){$("#anchor3").addClass("highlight");}, 8000); 
    setTimeout(function(){$("#anchor3").removeClass("highlight");}, 12000); 
    setTimeout(function(){$("#anchor4").addClass("highlight");}, 12000); 
    setTimeout(function(){$("#anchor4").removeClass("highlight");}, 16000); 
    setTimeout(function(){$("#anchor1").addClass("highlight");}, 16000); // this was 12000, changed to 16000 probably a copy paste error 
    setTimeout(loopMenu, 20000); 
} 
loopMenu();

來源

2013-05-14 15:01:58

按預期工作，但我必須保留ID和長腳本。無論如何，它非常有用，並且肯定會使用這個更小的jQuery項目。謝謝！ – danielnagy 2013-05-14 15:16:01

我只想走這條路：

var $anchors = $('a.anchor'), counter = 0; 

setInterval(function(){ 

    $anchors.removeClass('highlight'); 
    $anchors.eq(counter++ % $anchors.length).addClass('highlight'); 

}, 4000);

標記

<ul> 
    <li><a href="#" class="anchor">I am an anchor</a></li> 
    <li><a href="#" class="anchor">I am an anchor</a></li> 
    <li><a href="#" class="anchor">I am an anchor</a></li> 
    <li><a href="#" class="anchor">I am an anchor</a></li> 
    <li><a href="#" class="anchor">I am an anchor</a></li> 
</ul>

Fiddle。

來源

2013-05-14 15:04:45 moonwave99

這非常有用，但它在開始突出顯示前等待4秒鐘。它是一個非常好的解決方案，謝謝！ – danielnagy 2013-05-14 15:16:42

@danielnagy默認突出顯示第一個，然後從1開始計數。 – moonwave99 2013-05-14 15:19:16

謝謝，它的作品就是這樣。後來如果我能的話，我一定會給你投票。乾杯! – danielnagy 2013-05-14 15:22:27

與jQuery使用延遲對象，而不是setTimeout的，它是一個更清晰的代碼。

$("#anchor1").addClass("highlight"); 
function loopMenu(){ 
    $("#anchor1").delay(4000).removeClass("highlight"); 
    $("#anchor2").delay(4000).addClass("highlight"); 
    $("#anchor2").delay(8000).removeClass("highlight")); 
    $("#anchor3").delay(8000).addClass("highlight")); 
    $("#anchor3").delay(12000).removeClass("highlight"); 
    $("#anchor4").delay(12000).addClass("highlight"); 
    $("#anchor4").delay(16000).removeClass("highlight"); 
    $("#anchor1").delay(16000).addClass("highlight"); 
    setTimeout(loopMenu, 20000); 
} 
loopMenu();

來源

2013-05-14 15:09:53

.delay不適用於不帶持續時間的addclass或removeclass。 – 2013-05-14 15:21:38

在您的anchor標記中，將屬性類設置爲等於「menuItem」之類的東西。然後在你的jQuery做...

function startHighLighting(item, startTime, endTime) {  

    setInterval(function() { 
     item.addClass('highlight'); 
     setInterval(function() { 
      item.removeClass('highlight'); 
     }, endTime); 
    }, startTime); 
} 

$("a.menuItem").each(function(index) { 
    var item = $(this), 
    baseTime = 4000, 
    highlightTime = baseTime * index, 
    unhighlightTime = baseTime * (index + 1); 

    startHighLighting(item, highlightTime, unhighlightTime); 
});

我appologize的間距。我仍然試圖找出這個代碼輸入部分。

來源

2013-05-14 15:32:41 jhorton

jQuery loop - setTimeout，addClass，removeClass

回答

相關問題