Question

我有以下需要改编的jQuery：

$(document).ready(function(){

$(".rss-popup a").hover(function() {
$(this).next("em").stop(true, true).animate({opacity: "show", top: "-60"}, "slow");
}, function() {
$(this).next("em").animate({opacity: "hide", top: "-70"}, "fast");
});

});

CSS：

.rss-popup {
margin: 100px auto;
padding: 0;
width: 100px;
position: relative;
}

div.rss-popup em {
background: url(../images/rssbuttonbubble.png) no-repeat;
width: 100px;
height: 49px;
position: absolute;
top: -70px;
left: -0px;
text-align: center;
text-indent: -9999px;
z-index: 2;
display: none;
}
#rss-icon {
width: 42px;
height: 42px;
background: url(../images/rssbutton.png) no-repeat 0 0;
text-indent: -9999px;
margin: 0 auto;
display: block;
}

HTML：

<div class="rss-popup">
<a href="feed-link" id="rss-icon">RSS Feed</a>
<em>Subscribe to our RSS Feed</em>
</div>

我想让rssbuttonbubble.png出现在下面，而不是从上面出现，是否可以就如何实现这一点提出任何建议？

Answer 1

只需将动画中的top值和css调整为您想要的距离：

$(".rss-popup a").hover(function() {
 $(this).next("em").stop(true, true).animate({opacity: "show", top: "60"}, "slow");
}, function() {
 $(this).next("em").animate({opacity: "hide", top: "70"}, "fast");
});

在CSS中将top: -70px;更改为：

top: 70px;

这会使它显示在下方，如果你想要它更高，只需减少这些值，如果你想要它更低，则增加。

Answer 2

尼克的回答是正确的。您将希望尝试通过CSS执行此操作，但万一您不能通过Jquery实现类似的功能。有一个offset（）函数可以返回匹配元素的屏幕位置。完成后，您可以将另一个元素的位置设置到此位置，并将源元素高度添加到Y坐标。

请参阅jQuery documentation here.

jQuery帮助 - 出现在下面而不是顶部

2 个答案: