JQuery use Arrays with Each Function Code

on

<!DOCTYPE html>

<html lang="en" >

<head>

  <meta charset="UTF-8">

  <title>JQuery use Arrays with Each Function</title>

  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css'>  

<style>

/* css has also been tied up with animate.css external stylesheet by clicking  on the gear symbol in the top left forner */

.animated{

float:left;

margin-right: 10px;

text-align: center;

font-size: 150%;

box-shadow:  0 0 2px 2px grey;}

</style>

  <script>

  window.console = window.console || function(t) {};

</script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>  

</head>

<body translate="no">

  <h2 class="label"> Each side in px is : </h2>

<div class="wrapper"></div>

  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>

      <script id="rendered-js" >

var array = ["bounceIn", "bounceInLeft", "zoomIn", "rubberBand", "flip", "hinge"];

var delay = 1000;

//running each function  to iterate over each item in array

$.each(array, function (index, value) {

  setTimeout(function () {

    //generating a number between 150 and 200 and turning it into a integer from a fraction

    var dimension = parseInt(Math.random() * 51 + 150);

    var effect = $('<div class="animated"></div>');

    // attaching css properties to  the div with class animated

    effect.css({

      "background-color": "orange",

      "width": dimension,

      "height": dimension,

      "line-height": dimension + "px" });

    // pushing the  div with class animated inside div wrapper

    effect.appendTo(".wrapper");

    effect.addClass(value);

    // displaying css property value

    $(".label").append(dimension + " ");

    effect.append(value + " ");

  }, delay); //end of setTimeOut function

  delay += 1000;

}); // end of each function

    </script>  

</body>

</html>


Comments

Post a Comment