How to make a list items glow one after the other using CSS and JQuery

Question

I am trying to get a add a glow effect on each icon, one after the other. Therefore, the first icon would glow for a 10th of a second or so and return to normal, then the next icon along would glow and return to normal etc. I plan to use text-shadow for the glow and maybe some sort of a loop in JQuery to go though the list.

<ul>
<li>
    <span class="fa-stack custom-icon">
      <i class="fa fa-circle fa-stack-2x one"></i>
      <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
    </span>
</li>
<li>
    <span class="fa-stack custom-icon">
      <i class="fa fa-circle fa-stack-2x two"></i>
      <i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
    </span>
</li>
<li>
    <span class="fa-stack custom-icon">
      <i class="fa fa-circle fa-stack-2x three"></i>
      <i class="fa fa-linkedin fa-stack-1x fa-inverse"></i>
    </span>
</li>

CSS is simply ...

    text-shadow:0px 0px 40px #fff;

JQuery is ??

Any help welcome :)

Use a [css generator](http://css3generator.com/) if you're not very good at css. As for JQuery/javascript, there's plenty of [examples](http://stackoverflow.com/a/5835336/3913686) out there for [changing css](http://www.w3schools.com/js/js_htmldom_css.asp) over time. [This](http://jsfiddle.net/Ender/QLW6E/) is a working example of using an infinite loop which 'moves' a box to right every few seconds. Using these, you should be able to find the solution yourself :) — , Oct 22 '14 at 09:56
I have found this which I can amend and works on my code http://jsfiddle.net/PNRpx/1/ However, it would be great if the effect was gradual instead of the class just being on/off. I have tried the CSS ease property but no luck. — user1432315, Oct 22 '14 at 11:00

score 0 · Answer 1 · answered Oct 22 '14 at 13:57

Just add transition to it and it will work

var a = [];
$("h1 a").each(function(index) {
  a[index] = $(this);
  setTimeout(function() {
    a[index].addClass('glow').delay(1000).queue(function(next) {
      a[index].removeClass('glow');
      next();
    });
  }, index * 1000);
});

a {
  color: #000;
  text-decoration: none;
  text-shadow: -1px 0px 1px rgba(150, 150, 150, 1);
  transition: all 0.5s ease-in-out;
}
h1 {
  text-align: center;
}
.glow {
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


<h1>
    <a href="#">wellcome</a>,&nbsp;
    <a href="#">bonjoure</a>,&nbsp;
    <a href="#">bienvenido</a>,&nbsp;
    <a href="#">benvenuto</a>,<br/>
    <a href="#">добро пожаловать</a>,<br/>
    <a href="#">willkommen</a>
</h1>

How to make a list items glow one after the other using CSS and JQuery

1 Answers1