Question

I am trying to get a few divs to react to my mouseOver and mouseOut. I’m trying to build something similar to the the Vimeo-style volume bar.

I am getting the bars to react to the mouseOver, but I want them to return to their original height after the mouseOut. Each bar is a different height. It works when it is hard-coded, but I’m trying to use as little code as possible.

Here is my JQuery:

$(document).ready(function() {
var totalHeight = '100%';
var initHeight;

function getHeight(h) {
  initHeight = h;
  //alert(initHeight);
}

$("div#barWrap").children().mouseover(function() {
    // This is where I am having trouble. I want to get the original height of the bar so I can reuse it on mouseOut
    getHeight($("div#barWrap").children().css('height')); 
    // Animate bar
    $(this).animate({ height: totalHeight}, 100);
});

$("div#barWrap").children().mouseout(function() {
    $(this).animate({ height: initHeight}, 400);
});

});

Any help would be greatly appreciated.

Answer 1

Store the initial height as data for each element:

var totalHeight = '100%',
    $bwc = $('div#barWrap').children();

$bwc.each(function(i,el) {
    $(this).data('height', $(this).height());
});

$bwc.mouseover(function() {
    $(this).animate({ height: totalHeight}, 100);
});

$bwc.mouseout(function() {
    $(this).animate({ height: $(this).data('height') }, 400);
});