javascript - 使用 Jquery 非常快地切换类

Question

嘿伙计们，我想在短时间内更改一些标题的颜色并延迟，您可以将其想象为每十秒运行一个 LED 灯。

function emphheadline() {
    $( ".menu h1" ).each(function( index ) {
            $(this).toggleClass('hover').delay(1000).next().toggleClass('hover').delay(1000    );
    });
}

@Raj 我想在短时间内将标题一个接一个地染成红色。

$( document ).ready(function() {
    window.setInterval(emphheadline,3000);
});

function showandhide() {
	showmenu().delay(200).showmenu();
}

function emphheadline() {
    $( ".content h1" ).each(function( index ) {
		$(this).toggleClass('hover').delay(500).next().toggleClass('hover');
	});
}

$( document ).ready(function() {
    window.setInterval(emphheadline,3000);
});

body {
  background-color: darkgrey;
  color: black;
}

.left .content h1 {
  -webkit-transition: color 2s; /* Safari */
    transition: color 2s;
}

.left .content h1:hover {
  color: red;
}

.hover {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="left">
      <div class="content">
        <h1>headline 1</h1>
        <h1>headline 2</h1>
        <h1>headline 3</h1>
        <h1>headline 4</h1>
      </div>
    </div>

感谢您的帮助!

Answer 1

我一直讨厌这种带有 dom 元素的 jquery 方法。这样做:

(function(){
    var bulbs = [];
    $( ".menu h1" ).each(function() {
        bulbs.push({
            element: $(this),
            flag: false
        });
    };
    setInterval(function(){
        bulbs.forEach(function(bulb){
            bulb.flag = !bulb.flag;
            bulb.element.className = bulb.flag ? 'red' : 'green';
            //or bulb.toggleClass('your_cLass');
        });
    }, 100)
})()