javascript - jQuery - 在开始时找到 div 的 CSS 底部，而不是在悬停动画期间

Question

我正在为每个具有“货架信息文本”类的 div 查找 CSS 值“底部”。这些 div 中的每一个都在 shelf-item 内。

底部值是使用另一个函数自动计算的。悬停时，我希望通过动画将底部更改为 0px，然后恢复为原始底部。每个 div 的底部都会不同。

我添加了一些代码来找到底部，但是如果您在动画中间再次悬停，它会在底部返回到原始状态之前找到底部，因此会破坏动画。

请告知我哪里出错了。谢谢。

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);
});

Answer 1

编辑:重新阅读问题后，这里有一个解决方案，可以弄清问题并将其保存在数据属性中。

// we loop through all the shelf items and set a data attribute to keep track of it.
$('.shelf-item').each(function(){
    $item = $(this).find('.shelf-info-text');
    $itemBottom = $item.css('bottom');
    $item.data('bottom', $itemBottom);
});

$('.shelf-item').hover(function() {
    $itemBottom = $(this).find('.shelf-info-text').data('bottom');
    $(this).find('.shelf-info-text').stop().animate({ 'bottom': '0px'}, 300);
}, function() {
    $(this).find('.shelf-info-text').stop().animate({ 'bottom': $itemBottom}, 300);
});