Convert Function into a Javascript Object

Question

I am trying to convert a function into a javascript object but seem to run into an issue along the way please the original code work fine designed to execute using the .each method, calling back the setTranstion function.

However, The new code developed doesn't execute the same. I attempt to turn the original code into a javascript object as a result, I get an undefined variable $selector.

codepen link: https://codepen.io/paul-solomon/pen/yjBEpz

Please see below:

    Original Code
    ============================================= 

   //Global Vars
   $HvrContainer = $(".container-hover ,.transition- 
   hover,.transition h3");

   function setTransition(id, prop, delay, style) {
   $(id).css({ "-webkit-transition": prop + " " + 
   delay + " " + style });
   $(id).css({ "-moz-transition": prop + " " + delay 
   + " " + style });
   $(id).css({ "-o-transition": prop + " " + delay + 
   " " + style });
   $(id).css({ transition: prop + " " + delay + " " + 
   style });
   }

   //Module Controller for Sweep Classes
   $($HvrContainer).each(function() {

   $selector = $HvrContainer //Class or Id
   $transition = "all";  //Sets Option for Transition 
   $speed = ".3s"; //Sets Option for Speed  
   $FX =  "ease-in-out"; //Sets Option for Easing   

   setTransition ($selector, $transition, $speed 
  ,$FX);
   });


   New Code 
   ==============================================

   //Global Vars
   $HvrContainer = $(".container-hover ,.transition- 
   hover,.transition h3");

   function setTransition(id, prop, delay, style) {
   $(id).css({ "-webkit-transition": prop + " " + 
   delay + " " + style });
   $(id).css({ "-moz-transition": prop + " " + delay 
   + " " + style });
   $(id).css({ "-o-transition": prop + " " + delay + 
   " " + style });
   $(id).css({ transition: prop + " " + delay + " " + 
   style });
    }

   var fxController = {
   $selector : $HvrContainer,//Class or Id
   $transition : "all",  //Sets Option for Transition 
   $speed : ".3s", //Sets Option for Speed  
   $FX :  "ease-in-out", //Sets Option for Easing 
   $animationFX : function() {
   $($HvrContainer).each(function() {
    setTransition ($selector, $transition, $speed 
  ,$FX);
  })
 }
}

fxController.$animationFX();

Answer 1

First off all Functions in JS are objects, so no conversion needed here. Looking at your code i can tell that you're trying to make object fxController that has a method $animationFX and that method needs to use setTransition function. Inside the method you need to remember about the context, as you a trying to access the properties of the object, you need to address them with this (and don't forget to save the context of the object).

So your code will look like this:

$HvrContainer = $(".container-hover ,.transition-hover,.transition h3");

function setTransition(id, prop, delay, style) {
$(id).css({ "-webkit-transition": prop + " " + delay + " " + style });
$(id).css({ "-moz-transition": prop + " " + delay + " " + style });
$(id).css({ "-o-transition": prop + " " + delay + " " + style });
$(id).css({ transition: prop + " " + delay + " " + style });
}

var fxController = {
  $selector : $HvrContainer,//Class or Id
  $transition : "all",  //Sets Option for Transition 
  $speed : ".3s", //Sets Option for Speed  
  $FX :  "ease-in-out", //Sets Option for Easing 
  $animationFX : function() {
    $(this).each(function() { //Iterates over the object FxController
      setTransition (this.$selector, this.$transition, this.$speed, this.$FX);
    });
  }
};
fxController.$animationFX();