Currently, I am in search of the CSS value 'bottom' for each div that belongs to the 'shelf-info-text' class. These particular divs can be found inside a parent div called 'shelf-item'.
The bottom value is determined automatically with the help of another function. My goal is to have the 'bottom' value change to 0px on hover through an animation, and then return to its original position. Keep in mind that the bottom value will vary for each individual div.
I have implemented some code to locate the bottom value, but when hovering again during the animation, it retrieves the bottom value prematurely before returning to its initial state, causing the animation to break.
If possible, please provide guidance on where I may have made mistakes in my approach. Thank you.
var $itemBottom = null;
$('.shelf-item').hover(function() {
$itemBottom = $(this).find('.shelf-info-text').css('bottom');
$(this).find('.shelf-info-text').stop().animate({ 'bottom': '0px'}, 300);
}, function() {
$(this).find('.shelf-info-text').stop().animate({ 'bottom': $itemBottom}, 300);
});