Question

我一直在搜索如何滑下某个div的几个小时，但似乎没有成功。我在这里尝试做的是当您将.permalink悬停在#entry时向下滑动，#entry下方的#entry向下滑动。该脚本之前有效，但它的作用是向下滑动填充，而它下面的$(document).ready(function () { $("#entry").mouseover(function () { $(".permalink").stop().slideDown("slow"); }); $("#entry").mouseout(function () { $(".permalink").slideUp("slow"); });});不会。

这是JS：

{{1}}

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来缓解＆＃34;跳跃＆＃34;鼠标悬停在jQuery.com上查找它们以了解它们之间的区别。

最后，每页只应有一个唯一ID。拥有ID = #entry元素的所有四张照片就是为什么当您翻阅第一张照片时，所有四个固定链接都会向下滑动，而且该功能对剩下的三个没有效果。

编辑：

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

new fiddle

我怎样才能在悬停时滑动我的div而不滑过填充物？

3 个答案: