jQuery - addClass ACTIVE--> set timeout --> cycle (ok)(online.vinmec.com)

https://stackoverflow.com/questions/5789621/jquery-addclass-active-set-timeout-cycle

Đã hoàn thành (ok)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://code.jquery.com/jquery.js"></script>
  <style type="text/css">
    .active {
      color: red;
    }
  </style>
  <title>Document</title>
</head>
<body>
  <div id="div-1" class="cssClass">a</div>
  <div id="div-2" class="cssClass">b</div>
  <div id="div-3" class="cssClass">c</div>
  <div id="div-4" class="cssClass">d</div>
  <div id="div-5" class="cssClass">e</div>
  <script type="text/javascript">
    (function($) {
    $.fn.cycle = function(timeout, cls) {
      var l = this.length, current = 0, prev = 0, elements = this;
      function next() {
        elements.eq(prev).removeClass(cls);
        elements.eq(current).addClass(cls);
        prev = current;
        current = (current + 1) % l;
        setTimeout(next, timeout);
      }
      setTimeout(next, timeout);
      return this;
    };
    }(jQuery));
    $('div').cycle(1000, 'active');
  </script>
</body>
</html>

jQuery - addClass ACTIVE--> set timeout --> cycle

Ask QuestionAsked 9 years, 11 months agoActive 8 years agoViewed 2k times2

I have 5 elements with same class and at page-load the first div is active:

<div id="div-1" class="cssClass active"></div>
<div id="div-2" class="cssClass"></div>
<div id="div-3" class="cssClass"></div>
<div id="div-4" class="cssClass"></div>
<div id="div-5" class="cssClass"></div>

5 Answers

ActiveOldestVotes7

You can write your own cycle plugin like this:

(function($) {
    $.fn.cycle = function(timeout, cls) {
        var l = this.length,
            current = 0,
            prev = -1,
            elements = this;

        function next() {
            elements.eq(prev).removeClass(cls);
            // or just `elements.removeClass(cls);`
            elements.eq(current).addClass(cls);
            prev = current;
            current = (current + 1) % l; // modulo for wrap around
            setTimeout(next, timeout);
        }
        setTimeout(next, timeout);
        return this;
    };
}(jQuery));

and use it like this:

$('div').cycle(2000, 'active');

DEMO

Update: Overlooked that the first div is already active. You can make the plugin detect the already active div by adding:

if(this.filter('.' + cls).length > 0) {
    current = this.index(this.filter('.' + cls)[0]) + 1;
    prev = current - 1 ;
}

DEMO

Show 12 more comments2

This should do it. Explanation in comments.

function moveClass() {
   if ($('.active:first').next()) {
      $('.active:first')
          .removeClass('active') //remove the current class
          .next() //move to the next
          .addClass('active'); // add the class to the next div
   } else {
      $('.active').removeClass('active');
      $('.cssClass:first').addClass('active'); //move to the first of the lot if there is no more next()
   }

}

$('.cssClass:first').addClass('active');
setInterval(moveClass, 5000);
function changeClass() {
    if ($(".active").next(".cssClass").length > 0) {
        $(".active").removeClass("active").next(".cssClass").addClass("active");
    }
    else {
        $(".active").removeClass("active");
        $(".cssClass").first().addClass("active");
    }
    setTimeout(changeClass, 1000); // 1000ms = 1sec
}

And then just call changeClass() once to get the ball rolling.

Show 1 more comment1

Here's my example :).

First try.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js">

</script>

<style type="text/css">
    .active
    {
        font-weight:bold;    
    }
</style>




<div id="div-1" class="cssClass active">Div 1</div>
<div id="div-2" class="cssClass">Div 2</div>
<div id="div-3" class="cssClass">Div 3</div>
<div id="div-4" class="cssClass">Div 4</div>
<div id="div-5" class="cssClass">Div 5</div>

<button onclick="int=window.clearInterval(int)">Stop</button>


<script type="text/javascript">

    function toggleActive() {

        if ($(".cssClass:last").hasClass("active")) {
            console.warn("last element reached");
            $(".cssClass:last").toggleClass("active");
            $(".cssClass:first").toggleClass("active");
        }
        else {
            $(".active").first().toggleClass("active").next().addClass("active");
        }

    }
     var int;
    $(function () {

        int= self.setInterval("toggleActive()", 1000);

    });
</script>

Hope this helps.

Previous[MINICOLORS] jquery.minicolors (ok)NextWP Mapbox GL JS Settings key (ok)

Last updated