jquery - 悬停时向上滑动元素

Question

看看http://www.shopvcf.com/blog/?page_id=56

我需要用这个代码完成的带有红色心脏的区域向上滑动。

$(document).ready(function () {
    $('div.bottomwrap').on({
        'mouseenter': function () {
            $(this).animate({
                bottom: 20
            });
        },
        'mouseleave': function () {
            $(this).animate({
                bottom: 0
            });
        }
    });
});

问题是我希望它在进入包含内容的盒子时向上滑动，而不仅仅是底部包装。

我还想同时隐藏将在背景中显示图像的图像。

任何帮助都会很棒。谢谢！

Answer 1

您要做的一件事是将动画队列设置为 false 并设置持续时间。否则，如果用户在屏幕上快速来回悬停，那么所有东西都会继续移动。

查看http://api.jquery.com/animate/了解更多详细信息，但它看起来像这样：

至于你的问题。我会首先更改所有设置“jpgoverlay”的id - 将其设置为类名 - 如果是一个选项。那么下面的代码应该可以解决问题。拥有一个非唯一名称的 ID 可能会在以后给您带来一些痛苦。

$(document).ready (function () {
    $('div.jpgoverlay').on({
         'mouseenter': function() {
         $(this).animate({ bottom: 20 },{queue:false,duration:400});
    },
     'mouseleave': function() {
         $(this).animate({ bottom: 0 },{queue:false,duration:400});
     }
    });
});