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

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");
       });

 });

Answer 2

Here's a simple example, which uses variables and functions and moves some of the initial styling (e.g., 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 3

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 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

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 6

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 7

Try doing

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

and then you can do

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