I've successfully created two versatile functions that can be used with various CSS classes.
var CSSElement;
$(document).ready(function(){
expandBox (".orange");
minimizeBox(".orange");
});
function expandBox ($CSSElement){
//When the mouse hovers over
$($CSSElement).mouseover(function(){
$(this).stop().animate({height:'485px'},{queue:false, duration:600, easing: 'easeOutBounce'})
});
}
function minimizeBox ($CSSElement){
//When the mouse is moved away
$(CSSElement).mouseout(function(){
$(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})
});
}
Despite my efforts, only the expandBox function appears to work properly. Unfortunately, when I move my cursor away from the .orange element, the box fails to contract as intended.
I intend for these animations to be reused multiple times throughout my website, hence why I want them to be encapsulated within functions. Interestingly, when I structure my code like this:
$(document).ready(function(){
//When the mouse hovers over
$($CSSElement).mouseover(function(){
$(this).stop().animate({height:'485px'},{queue:false, duration:600, easing: 'easeOutBounce'})
});
//When the mouse is moved away
$(CSSElement).mouseout(function(){
$(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})
});
});
Surprisingly, everything works fine in this setup. Can anyone explain why the first code doesn't work but the second one does?
Thank you,
vnayak