0

我正在为每个具有“货架信息文本”类的 div 找到 CSS 值“底部”。这些 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);
});
4

3 回答 3

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);
});
于 2013-10-21T13:33:15.297 回答
1

我参加聚会太晚了（因为我在做这个小提琴时分心了）。我的方法与@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);
});
于 2013-10-21T14:08:57.730 回答
0

您可以使用jQuery.data()存储原始底部值。然后您的函数可以检查该值是否已存储，并且永远不会重新计算底部（避免中间动画问题）。

于 2013-10-21T13:42:42.843 回答