Agfdhyk

I`need to return the attribute value of "data-animate" and "data-speed" to the object fxBalloon. In that object those string values should be passed to duration : $speedFX and name :$nameFX but comes up undefined. Please look at code below and link for reference

https://codepen.io/paul-solomon/pen/MzjYmK?editors=1111.

<div class="container">

        <div class="balloon">

          <div class="fxballoon" data-animate="b_layer1" data-speed="6s">

            <span>sample</span>

          </div>

          <div class="fxballoon" data-animate="b_layer2" data-speed="5s">

            <span>sample</span>

          </div>

           <div class="fxballoon" data-animate="b_layer3" data-speed="3s">

             <span>sample</span>

          </div>

        </div>

    </div>



//Global Var

var $elemClass = $(".balloon .fxballoon"); 



var fxBalloon = {

  elem : $elemClass,//Class or Id

  name :$nameFX,  //Sets Option Name for Balloon Animation 

  duration : $speedFX, //Sets Option for Speed  

  delay :  "ease-in-out", //Sets Option for Easing 

  count : "infinite", // sets an Infinite Loop

  action : "paused", // Sets the Play or Pause Action

  $nameFX: function() {

     dataAnimation();

    },

  $speedFX: function() {

    dataSpeedAnimation();

    },

  $animationFX: function() {

  $(this).each(function() { //Iterates over the object FxController    

 setAnimation(this.elem,this.name,this.duration,this.delay,this.count,this.action);

     });

    }

  };







fxBalloon.$animationFX();



 // loops to get the data-speed attribute value from DOM

 function dataSpeedAnimation(){

    for( var i = 0; i < $elemClass.length;i++){

     // console.log($elemClass[i].getAttribute("data-speed"));

      $elemClass[i].getAttribute("data-speed");

    }

  }

 // loops to get the data-animate attribute value from DOM

 function dataAnimation(){

      for( var i = 0; i <  $elemClass.length;i++){

        return $elemClass[i].getAttribute("data-animate");

      }

    }



// Object Construct for CSS to animate styles to DOM

function setAnimation(elem, name, duration, delay, count, action) {

$(elem).css({ "-webkit-animation": name + " "+ duration + " "+ delay + " "+ count });

$(elem).css({ "-moz-animation": name + " "+ duration + " "+ delay + " "+ count });

$(elem).css({ "-o-animation": name + " "+ duration + " "+ delay + " "+ count  });

$(elem).css({ "animation": name + " "+ duration + " "+ delay + " "+ count});

$(elem).css({ "animation-play-state:": action});

}

    var fxBalloon = {

  elem : $elemClass,//Class or Id

  name :"ease-in-out",  //Sets Option Name for Balloon Animation 

  duration : "ease-in-out", //Sets Option for Speed  

  delay :  "ease-in-out", //Sets Option for Easing 

  count : "infinite", // sets an Infinite Loop

  action : "paused", // Sets the Play or Pause Action

  $nameFX: 

   dataAnimation(),

  $speedFX: 

     dataSpeedAnimation(),

  $animationFX: function() {



     $(this).each(function() { //Iterates over the object FxController

         dataSpeedAnimation(); 

 setAnimation(this.elem,this.name,this.duration,this.delay,this.count,this.action);

     });

    }

  };

 fxBalloon.$animationFX();