如何在不滑过填充的情况下在悬停时滑动我的 div？

Question

我已经搜索了几个小时来了解如何向下滑动某个 div，但它似乎没有奏效。我在这里尝试做的是当您将#entry 悬停在.permalink 下方时，它下方的#entry 会随之向下滑动。该脚本之前工作过，但它所做的只是滑过填充物，而它下面的 #entry 没有。

这是 JS：

$(document).ready(function () {
$("#entry").mouseover(function () {
    $(".permalink").stop().slideDown("slow");
});
$("#entry").mouseout(function () {
    $(".permalink").slideUp("slow");
});});

Fiddle

如果你们能帮我解决这个问题，那就太棒了。谢谢！ x

编辑： 这是我的blog 的链接。我在那里标记了一些照片集，这样你就会知道我在做什么。我正在使用@Csdtesting 发布的代码。它适用于小提琴，但不适用于我的博客。

Answer 1

请改用.mouseenter 和.mouseleave！

$(document).ready(function () {
$(".photo").mouseenter(function() {
        $(this).find('.permalink').stop().slideDown("slow");
    }).mouseleave(function() {
        $(".permalink").slideUp("slow");
    });
});

http://jsfiddle.net/csdtesting/umws6nrk/9//

Answer 2

您可以为填充或边距设置动画以匹配永久链接元素的高度：

.entry {
    ...
    margin-bottom: 18px;
}

$(".entry").mouseover(function () {
    $(this).find(".permalink").stop().slideDown("slow");
    $(this).stop().animate({
        'margin-bottom': '0'
    }, 'slow');
});
$(".entry").mouseout(function () {
    $(this).find(".permalink").stop().slideUp("slow");
    $(this).stop().animate({
        'margin-bottom': '18'
    }, 'slow');
});

Demo

在我的演示中有一个 1 像素的抖动，可能是由于高度舍入的特性。不过，我现在没时间了。

Answer 3

您的代码有一些问题...如果我理解正确，您的主要问题的答案是永久链接位于 .photo 的 div 元素内。因此，当永久链接向下滑动时，它的容器 (.photo) 也必须扩展为它腾出空间。将永久链接移到 .photo div 之外。

fiddle

<div id="entry">
        <div class="photo">
            <img src="https://38.media.tumblr.com/358b80be4c70049645ce41fdc3a664bf/tumblr_mz4c7ymrJJ1rb40pco1_500.gif">

        </div>
            <div class="permalink"><a class="link" href="">PERMALINK</a>

            </div>
    </div>

此外，您应该使用上面所说的 mouseenter 和 mouseleave 来减轻鼠标悬停的“跳跃性”。在 jQuery.com 上查找它们以了解它们的区别。

最后，每个页面应该只有一个唯一 ID。拥有 ID = #entry 元素的所有四张照片就是为什么当您翻过第一张照片时，所有四个永久链接都向下滑动，而该功能在其余三张上不起作用。

编辑：

好的，我想我现在明白了这个问题。艾舍伍德的想法是正确的。虽然你不需要任何额外的动画。将第二行向下推是因为没有固定链接的空间，所以它当然需要推它。您需要做的就是从一开始就为永久链接添加一些空间。最简单的方法是为#entry 元素指定一个高度。

new fiddle