我正在为每个具有“货架信息文本”类的 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);
});
最佳答案
编辑: 重新阅读问题后,这里有一个解决方案,可以弄清问题并将其保存在数据属性中。
// 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);
});
关于javascript - jQuery - 在开始时找到 div 的 CSS 底部,而不是在悬停动画期间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19495926/