Question

<!-- inEar -->
$("#inEear ul li a").ready(function(){
    thisBlock = $("#dueceBlock");
    maxWidth = 280; /*controls max width of the block*/
    minWidth = 180; /*controls min widht of the block*/


    $("#inEar ul li a").hover(
      function(){
        $(thisBlock).animate({width: minWidth+"px"}, { queue:false, duration:500 });
    $(this).animate({width: maxWidth+"px"}, {specialEasing:'easeInOutBounce', duration:300}, { queue:false, duration:500 });
    $(this).animate({width: maxWidth-"px"}, {specialEasing:'easeInOutBounce', duration:100}, { queue:false, duration:500 });

        thisBlock = this;
      }
    );
})
<!-- inEar end-->

<!-- onEar -->
$(".onEarLink").ready(function(){
    thisBlock = $("#chillBlock");
    maxWidth = 280; /*controls max width of the block*/
    minWidth = 180; /*controls min widht of the block*/


    $(".onEarLink").hover(
      function(){
        $(thisBlock).animate({width: minWidth+"px"}, { queue:false, duration:500 });
    $(this).animate({width: maxWidth+"px"}, {specialEasing:'easeInOutBounce', duration:300}, { queue:false, duration:500 });
    $(this).animate({width: maxWidth-"px"}, {specialEasing:'easeInOutBounce', duration:100}, { queue:false, duration:500 });

        thisBlock = this;
      }
    );
})
<!-- onEar end-->

<!-- overEar -->
$(".overEarLink").ready(function(){
    thisBlock = $("#heroBlock");
    maxWidth = 400; /*controls max width of the block*/
    minWidth = 100; /*controls min widht of the block*/


    $(".overEarLink").hover(
      function(){
        $(thisBlock).animate({width: minWidth+"px"}, { queue:false, duration:500 });
    $(this).animate({width: maxWidth+"px"}, {specialEasing:'easeInOutBounce', duration:300}, { queue:false, duration:500 });
    $(this).animate({width: maxWidth-"px"}, {specialEasing:'easeInOutBounce', duration:100}, { queue:false, duration:500 });

        thisBlock = this;
      }
    );
})

---

My problem is: my third function (.overEarLink) keeps overwriting the first function (#inEar ul li a) and second function (.onEarLink). This is not what I want. I want to make three function calls different parts and controls their own animation. I didn’t understand why even though I specified the different name of each function, why the third function still overwrites the first function and the second function.

Thanks for everybody’s help.

---

Adding var works, I appreciate for your answers. However, I used var on maxWidth and minWidth too. However, same thing happened, the third var overwrites the first var and the second var again.
Here is the code for it:

$("#overEar ul li a").ready(function(){
   var thisBlock = $("#heroBlock");
   var maxWidth = 358; /*controls max width of the block*/
   var minWidth = 180;

   var thisBlock = $("#reverbBlock"); /*controls min widht of the block*/
   var maxWidth = 340; 
   var minWidth = 180;

   var thisBlock = $("#solosBlock"); 
   var maxWidth = 402; 
   var minWidth = 180;

    $("#overEar ul li a").hover(
      function(){
        $(thisBlock).animate({width: minWidth+"px"}, { queue:false, duration:500 });
    $(this).animate({width: maxWidth+"px"}, {specialEasing:'easeInOutBounce', duration:300}, { queue:false, duration:500 });
    $(this).animate({width: maxWidth-"px"}, {specialEasing:'easeInOutBounce', duration:100}, { queue:false, duration:500 });

        thisBlock = this;
      }
    );
})

Thanks for everybody’s answers.

Answer 1

You need to use local variables, so that each function has separate variables from the other functions. For example, change this:

    thisBlock = $("#heroBlock");
    maxWidth = 400; /*controls max width of the block*/
    minWidth = 100; /*controls min widht of the block*/

to this:

    var thisBlock = $("#heroBlock");
    var maxWidth = 400; /*controls max width of the block*/
    var minWidth = 100; /*controls min widht of the block*/

The var keyword restricts the variable’s scope to the specific function in which it’s declared.