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

这是一个可能适合你的小提琴 https://jsfiddle.net/kht4xp1v/7/

[18-01-27 13:24:35:056 HKT] Starting execution
[18-01-27 13:24:35:079 HKT] SpreadsheetApp.getUi() [0.015 seconds]
[18-01-27 13:24:35:299 HKT] GmailApp.search([from:miikka.kukkosuo@gmail.com in:inbox, 0, 1]) [0.218 seconds]
[18-01-27 13:24:35:478 HKT] GmailThread.getMessages() [0.178 seconds]
[18-01-27 13:24:35:479 HKT] GmailMessage.getDate() [0 seconds]
[18-01-27 13:24:35:799 HKT] GmailMessage.getBody() [0.32 seconds]
[18-01-27 13:24:40:027 HKT] Ui.alert([Success! URL FOUND!: 
https://www.linnake.fi/e1t/c/*W7jytSj66jddKW1p_c9t3s4gsp0/*W3BkDbD4Xs7kfW4tJh-k19HByV0/5/f18dQhb0Sjv98XJ9RdW8C8HT52qwv1SV6bgdG2shkfGMf5pP-XD6prW7cmS1s8pCQ6vW25G0-N51_rSsW3Tmswx61]...) [4.227 seconds]
[18-01-27 13:24:40:108 HKT] UrlFetchApp.fetch([https://www.linnake.fi/e1t/c/*W7jytSj66jddKW1p_c9t3s4gsp0/*W3BkDbD4Xs7kfW4tJh-k19HByV0/5/f18dQhb0Sjv98XJ9RdW8C8HT52qwv1SV6bgdG2shkfGMf5pP-XD6prW7cmS1s8pCQ6vW25G0-N51_rSsW3Tmswx61SSZmW7mG7sD51vX4yW6HBR, {=}]...) [0.079 seconds]
[18-01-27 13:24:40:235 HKT] Execution failed: TypeError: Cannot read property "1" from null. (line 51, file "Code") [5.152 seconds total runtime]

你可以使用function emphheadline() { $( ".content h1" ).each(function( index ) { var self = $(this); setTimeout(function () { $(self).toggleClass('hover'); }, index*500); }); }函数来显示延迟，如图所示

Answer 2

我总是讨厌使用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)
})()

Answer 3

以下示例在红色和绿色之间闪烁十次。

<script>
$(window).load(function(){
  var i = 0;
  $('.menu h1').each(function(){
    $(this).css({'animation-delay': i++ + 's', 'animation-name': 'colour'})
  })
});
</script>

.menu h1 {
  animation-duration: 10s;
  animation-iteration-count: 10;
  color: red;
}

@keyframes colour {
  
  0% {
    color: red;
  }

  0.01% {
    color: green;
  }

  10% {
    color: green;
  }
  
  10.01% {
    color: red;
  }

  100% {
    color: red;
  }
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
  <h1>Heading 1</h1>
  <h1>Heading 2</h1>
  <h1>Heading 3</h1>
  <h1>Heading 4</h1>
</div

（如果您需要转换而不是闪烁，请编辑* .01％关键帧状态）

Answer 4

我在https://jsfiddle.net/kht4xp1v/4

更新了你的jfiddle

这是使用Javascript来完成此任务。它需要使用一个索引，该索引在设定的时间间隔内循环并创建动画：

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

$( document ).ready(function() {
    var index = 0;
    var headings = $(".content h1");
    window.setInterval(function(){
        if (index !== 0){
        headings.eq(index - 1).toggleClass("hover");
      }
      headings.eq(index).toggleClass("hover");
      ++index;
    }, 3000);
});

Answer 5

也许这就是你要找的东西

$(document).ready(function() {
var leds = $(".leds li").length;
var index = 0;
window.setInterval(function() {if(index == leds) { index = 0;} index = switchLed(index); }, 500);
});


function switchLed(index) {
var filter = ':nth-child(' + index + 'n)';
$(".leds li").filter(filter).removeClass("active");
$(".leds li").eq(index).addClass("active");
return ++in
}

https://jsfiddle.net/kht4xp1v/6/

使用Jquery快速切换类

5 个答案: