1

I want to apply some blinking and scaling effect on the <li> items of <ul> so for that I have created a class called blink but I want the element to be called randomly and their class name should be changed by blink and the effect will occur.

I have given every <li> element an absolute position as I want them to be at random position so that's why I can't simply iterate a same class to every element that's why I need something that is not asked yet.

I have created a class that can have blinking as well as scaling effect.

$(document).ready(function() {

  var $liCollection = $(".progressive-elems li");

  var $firstListItem = $liCollection.first();
  console.log($firstListItem);

  $liCollection.first().addClass("blink");

  setInterval(function() {

    var $activeListItem = $(".blink");

    $activeListItem.removeClass("blink");

    var $nextListItem = $activeListItem.closest('li').next();

    if ($nextListItem.length == 0) {
      $nextListItem = $firstListItem;
    }

    $nextListItem.addClass("blink".);
  }, 500);

});
.blink {
  -webkit-animation: blink .75s linear infinite;
  -moz-animation: blink .75s linear infinite;
  -ms-animation: blink .75s linear infinite;
  -o-animation: blink .75s linear infinite;
  animation: blink .75s linear infinite;
}

@keyframes blink {
  0% {
    transition-duration: 0.4s;
  }
  50% {
    transform: scale(1.6);
  }
  0% {
    -webkit-transition-duration: 0.4s;
  }
  50% {
    -webkit-transform: scale(1.5);
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="progressive-elems">
  <ul id="mylist">
    <li class="elem1">progressive</li>
    <li class="elem2">Safe</li>
    <li class="elem3">Connectivity</li>
    <li class="elem10">Independent</li>
    <li class="elem4">Re-</li>
    <li class="elem11">Engagable</li>
    <li class="elem5">Discoverable</li>
    <li class="elem6">Link</li>
    <li class="elem7">Refreh</li>
    <li class="elem8">Responisve</li>
    <li class="elem9">APP-LIKE</li>
  </ul>
</div>
showdev
  • 28,454
  • 37
  • 55
  • 73
  • So you want to [pick a random element from an Array](https://stackoverflow.com/questions/5915096/get-random-item-from-javascript-array)? – nicholaswmin Jul 23 '19 at 16:51
  • yes @NikKyriakides but i am also getting an error in my jquery as uncought syntex error :invalid or unepected token can you help me out withh this –  Jul 24 '19 at 05:17
  • You are asking several questions at once. Please focus on one question only. – trincot Jul 24 '19 at 05:23
  • @trincot thanks for the reply i have resolved the issues now it's working fine thank you –  Jul 24 '19 at 05:51

0 Answers0