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>
Comments
Post a Comment