javascript - jquery cycle divs randomly then add class and remove after delay -

i'm trying cycle through series of div @ random. each time selects div adds class of .active-key removes again , moves onto div after amount of time. there way in jquery?

<div id="keyboard">    <div class="key">    <div class="key active key">    <div class="key">    <div class="key">    <div class="key">    <div class="key"> </div>  var divs = $('#keyboard .key ').addclass('active-key'),  = 0;   (function cycle() {   divs.eq(i).show(0)  .delay(1000)  .removeclass('active-key');   = ++i % divs.length;   })(); 

---

if working svg have use attr instead of class.

js fiddle final working svg example

for random items selection can try this:

var divs = $('#keyboard .key');    (function cycle() {        settimeout(function() {          var index = math.floor(math.random() * divs.length);          divs.removeclass('active-key')              .eq(index).addclass('active-key');          cycle();      }, 1000);        })();

.key {      width: 40px;      height: 40px;      background: #eee;      display: inline-block;  }  .key.active-key {      background: coral;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div id="keyboard">      <div class="key active-key"></div>      <div class="key"></div>      <div class="key"></div>      <div class="key"></div>      <div class="key"></div>      <div class="key"></div>  </div>