Jquery 悬停时向上滑动元素

看看

我需要与红色的心脏区域向上滑动，我已经完成了这个代码

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

问题是，我想它滑入框中时，与内容，而不仅仅是底部包装

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

---

任何帮助都会很好。谢谢

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

查看更多详细信息，但看起来是这样的：

至于你的问题。我会首先更改所有集合“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});
     }
    });
}); 

---

他发布了他已经尝试过的内容。尝试将事件添加到整个框中，而不仅仅是

bottomwrap

。我注意到你的页面上有一个问题。您有多个ID为

postwrap

的元素。不要那样做。id应该是唯一的，将其作为一个类。您的

containloop

也是一个具有多个div的id。多个Postwrap的原因是因为这是一个具有三个循环的wordpress。它只是围绕着每个循环中的一些文本。与包含循环相同。