javascript - jQuery loop - setTimeout, addClass, removeClass -


i easy 1 javascripters. had long research couldn't find right answer. want menu (basically anchors , not list elements) highlighted slider specific time delay.

also, nice if know how rid of these useless ids around using $("#menu a") , $(this). since cannot javascript (although prefer simplicity), here crappy code in jquery works, it's not looping.

$("#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(); 

what want: script removes class current element , addclass next anchor type element every 4 seconds , jump first element , repeat forever.

here solved question has few relations this, although can't make work either.

something like:

$(function () {   var $anchors = $('.anchor');    (function _loop(idx) {     $anchors.removeclass('highlight').eq(idx).addclass('highlight');     settimeout(function () {       _loop((idx + 1) % $anchors.length);     }, 4000);   }(0)); }); 

with:

<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/


Comments

Popular posts from this blog

jquery - How can I dynamically add a browser tab? -

node.js - Getting the socket id,user id pair of a logged in user(s) -

keyboard - C++ GetAsyncKeyState alternative -