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

我来晚了太晚了（因为我分心了this fiddle）。我的方法与@ 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()存储原始底部值。然后你的函数可以检查是否存储了该值，并且从不重新计算底部（避免动画中期问题）。

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

3 个答案: