Jquery function does not display animation

Question

I have created two functions which will allow me to use them with different CSS classes.

    var CSSElement;
$(document).ready(function(){  


  expandBox (".orange");
  minimizeBox(".orange");

});

function expandBox ($CSSElement){
     //When mouse rolls over  
    $($CSSElement).mouseover(function(){  
        $(this).stop().animate({height:'485px'},{queue:false, duration:600, easing: 'easeOutBounce'})  
    });     
}

function minimizeBox ($CSSElement){
     //When mouse is removed  
    $(CSSElement).mouseout(function(){  
        $(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})  
    }); 
}

However, only the function expandBox seems to work. If I hover my mouse away the from the .orange element the box does not contract.

I want these animations to appear as functions as I plan to use them few times within my website. If I put my code like below:

$(document).ready(function(){  

   //When mouse rolls over  
    $($CSSElement).mouseover(function(){  
        $(this).stop().animate({height:'485px'},{queue:false, duration:600, easing: 'easeOutBounce'})  
    });  

  //When mouse is removed  
    $(CSSElement).mouseout(function(){  
        $(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})  
    }); 

});

Everything seems to work ok. Is there a reason why the first code does not work but the second one does?

Thanks,

vnayak

Could you please provide complete set of information, i.e. HTML and jQuery parts, and also encapsulate it in jsfiddle? — Alexander Bell
– Alexander Bell, Commented May 12, 2013 at 22:50

karthikr · Accepted Answer · 2013-05-12 23:05:12Z

3

I guess you made a typo :

$($CSSElement)

$(CSSElement)

thats why it doesn't work

edited May 12, 2013 at 23:05

karthikr

100k26 gold badges208 silver badges191 bronze badges

answered May 12, 2013 at 22:53

igor

2,9253 gold badges22 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user2280642 Over a year ago

Thanks Kitty! It works perfectly now. Late night coding is a bad thing for me, I guess!

michaelb958--GoFundMonica · Accepted Answer · 2013-05-12 23:01:23Z

2

In JavaScript, $ is a perfectly legal character in identifiers (rather than, say, completely forbidden [like in C] or a special sigil [PHP, Perl]). As a result, $CSSElement is a different identifier to CSSElement - if only one is defined, the other won't work. $($CSSElement) and $(CSSElement) are different.

(It is potentially confusing to prefix variable names with $; in JavaScript they work just fine without.)

What is happening here:

Both functions take a parameter named with $.
expandBox uses that parameter with the $.
minimizeBox uses it without the $ (thus using some unrelated variable).

My advice: Change everything to not use prefixed $, like this:

function expandBox (CSSElement){
     //When mouse rolls over  
    $(CSSElement).mouseover(function(){  
        $(this).stop().animate({height:'485px'},{queue:false, duration:600, easing: 'easeOutBounce'})  
    });     
}

function minimizeBox (CSSElement){
     //When mouse is removed  
    $(CSSElement).mouseout(function(){  
        $(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})  
    }); 
}

answered May 12, 2013 at 23:01

michaelb958--GoFundMonica

4,7367 gold badges34 silver badges35 bronze badges

1 Comment

user2280642 Over a year ago

Thanks for the explanation Michaelb958. Much appreciated.

Collectives™ on Stack Overflow

Jquery function does not display animation

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related