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

Question

我正在使用'shelf-info-text'类找到每个div的CSS值'bottom'。 这些div中的每一个都在货架内。

底部值使用其他功能自动计算。 在悬停时我希望通过动画将底部更改为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);
});

Answer 2

我来晚了太晚了（因为我分心了这个小提琴 ）。 我的方法与@ Patsy相同，但我避免使用.each()循环来设置data-bottom ，只需将其设置为尚未存在：

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

Answer 3

您可以使用jQuery.data（）存储原始底部值。 然后你的函数可以检查是否存储了该值，并且从不重新计算底部（避免动画中期问题）。