How to Use Variables in jQuery

Question

I have the following code which works just fine in hiding and showing elements as the mouse in placed over the parent element. The problem is that I know it could be more concise and cleaner if I used variables for statments that repeat several times in the code. I have looked around this site and google for an answer and although there are answers to similar questions I have not found one that works for me. Here is the code:

    $(document).ready(function(){

      $(".ultra").css("display","none");

      $(".ultras").on("mouseenter", function(){
        $(".ultra").animate({ opacity: 1.0 },400).slideToggle();
      });

      $(".ultras").on("mouseleave", function(){
        $(".ultra").animate({ opacity: 1.0 },400).slideToggle();
      });

       // new function
      $(".escon").css("display","none");
         $(".ultras2").on("mouseenter", function(){
            $(".escon").animate({ opacity: 1.0 },400).slideToggle();
         });

      $(".ultras2").on("mouseleave", function(){
          $(".escon").animate({ opacity: 1.0 },400).slideToggle();
      });                                   
    });

As you can see:

    .animate({ opacity: 1.0 },400).slideToggle();

Repeats over and over in the code. I don't know a) how to declare the variable and b) how to use it to replace the instances it is repeated in the code.

Answer 1

Try doing

function animate(val){
    $(val).animate({ opacity: 1.0 },400).slideToggle();
}

and then you can do

animate(".escon")
animate(".ultra")

Answer 2

In this case, you should create a function containing .animate({ opacity: 1.0 },400).slideToggle(); and then assign the element you're animating as a variable to pass to the function.

For example:

var $ultra = $(".ultra");
var $escon = $(".escon");   

function slide(element) {
  element.animate({ opacity: 1.0 },400).slideToggle();
}

$(".ultras").on("mouseenter", function(){
  slide($ultra);
}) 

And so on and so forth; this allows you to keep your code DRY and reuse the animation as much as you want!

Answer 3

You can store jQuery selectors in variables like this: var $ultra = $(".ultra");

This is good for performance to save jQuery repeatedly re-running the same selector over and over again.

Note: using a $ before a variable name is a good way of reminding yourself that the value of the variable is a jQuery selector.

You can then use it like $ultra.css(...);

For animation you can do something like this:

function animate($element) {
    $element.animate({ opacity: 1.0 },400).slideToggle();
}

Then you can use the function like this animate($ultra);

Answer 4

Variables in JavaScript (same goes for all JS librairies) are declared like this :

var varName = varValue;

Everytime you call

$(".ultra")

jQuery searches the whole DOM to constitute a collection of elements with class "ultra" so yeah you could heavily optimize your code by doing this :

var ultra = $(".ultra");
var ultras = $(".ultras");

  ultra.css("display","none");

  ultras.on("mouseenter", function(){
    ultra.animate({ opacity: 1.0 },400).slideToggle();
  });

  ultras.on("mouseleave", function(){
    ultra.animate({ opacity: 0 },400).slideToggle();
  });

but In terms of code conciseness, I would go with the function solution (using declared variables inside the function to avoid re-searching the DOM)

Answer 5

By using classes you can cut down on the number of lines and create more concise code, without functions or variables.

 $(document).ready(function(){ $(".ultra").hide(); $(".ultras").on("mouseenter mouseleave", function(){ $(this).find(".ultra").stop(true,true).slideToggle(); }); }); 

 .ultra { width:50px; height:50px; float:left; border:1px solid black; } .ultras { border: 2px solid blue; padding:20px; margin:10px; } .escon { width:30px; height:30px; } .clearFloat { clear:both; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="ultras" id="ultras1"> <div class="ultra" id="ultra1">&nbsp;</div> <div class="ultra" id="ultra2">&nbsp;</div> <div class="clearFloat"></div> </div> <div class="ultras" id="ultras2"> <div class="ultra" id="ultra3">&nbsp;</div> <div class="ultra" id="ultra4">&nbsp;</div> <div class="clearFloat"></div> </div> 

Answer 6

Here's a simple example, which uses variables and functions and moves some of the initial styling (eg, css('display','none') ) to the the CSS, instead of keeping it in the JS.

There's a lot more optimization that can be done, but this may be used as a stepping stone to illustrate the point:

 $(document).ready(function() { var $ultra = $('.ultra'), $ultras = $('.ultras'), $ultras2 = $('.ultras2'), $escon = $('.escon'); function slideToggle($el) { $el.animate({ opacity: 1.0 }, 400).slideToggle(); } $ultras.on("mouseenter mouseleave", slideToggle.bind(null,$ultra)); $ultras2.on("mouseenter mouseleave", slideToggle.bind(null,$escon)); }); 

 .ultra, .escon { display: none; } .ultras, .ultras2 { border: 1px solid black; height: 1em; margin: 1em; padding: 1em; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="ultras"> <div class="ultra">ultra inside</div> </div> <div class="ultra">ultra outside</div> <div class="ultras2"> <div class="escon">escon inside</div> </div> <div class="escon">escon outside</div> 

Answer 7

I ended up doing this which is optimized but perhaps could even be better; I took ideas from some of the examples and suggestions provided and it works:

$(document).ready(function(){
     function animate(val){
        $(val).animate({ opacity: 1.0 },200).slideToggle();
     }

     $(".ultra, escon").css("display","none");
     $(".ultras").on("mouseenter mouseleave", function(){
      animate(".ultra");
     });

     // ********* new function
       $(".ultras2").on("mouseenter mouseleave", function(){
         animate(".escon");
         animate(".vm");
       });

 });