Question

Site Link
如果向下滚动一点，你会看到一些社交图标，当它们悬停时，它们会在fadeIn()事件中使用hover()显示我在jQuery中创建的简单工具提示。所以问题是我想要这个this页面中的内容（向下滚动一下以查看图标）。如何使用fadeIn或任何其他jQuery效果实现此类效果？

一个图标的HTML：

<div class="col-md-3 col-sm-3 tooltip-toggler">
    <a href="#">
        <div id="facebookIcon" class="social-round">
            <span class="fa fa-facebook"></span>
        </div>
    </a>
    <span class="social-tooltip fb">Facebook</span>
</div>

jQuery：

$(".tooltip-toggler").hover(function(e) {
    $(this).children(".social-tooltip").fadeIn(100);
}, function(e) {
    $(this).children(".social-tooltip").fadeOut(100);
});

相关CSS：

.tooltip-toggler {
    position: relative;
}   
.social-tooltip {
    display: none;
    position: absolute;
    top: -45px;
    left: -20px;
    width: auto;
    padding: 10px;
    transition: 0.3s ease-out;
    -moz-transition: 0.3s ease-out;
    -o-transition: 0.3s ease-out;
    -webkit-transition: 0.3s ease-out;
}

jSFIDDLE（请展开结果窗口以查看正确的结果）

Answer 1

您可以使用animate

$(".tooltip-toggler").hover(function(e) {
    $(".social-tooltip", this).animate({'top':'-45px', 'opacity':1},200)
}, function(e) {
   $(".social-tooltip", this).animate({'top':'-100px', 'opacity':0},200)
});

DEMO

<强>更新

此处链接到您的jsFiddle

Answer 2

如果您想为图标仅提供fade-in效果，请使用以下课程。

.social-round:hover
{
  opacity:0.7;
}

注意：我不是在讨论这里的工具提示。我只是根据您的参考链接给出答案。

DEMO

Answer 3

$(".social-round p").mouseenter(function(){
    var tooltip = $(this).parents(".tooltip-toggler").find(".social-tooltip");
      tooltip.animate({
        top: "+=30",
        opacity:"1",
    }, 0);
});
$(".social-round p").mouseleave(function() {
    var tooltip = $(this).parents(".tooltip-toggler").find(".social-tooltip");
      tooltip.animate({
        top: "-=30",
        opacity:"0",
    }, 100);
});

尝试以上代码，这可能有助于您实现目标并检查演示 DEMO

竖起大拇指如果这适用于你

Answer 4

制作http://www.jsfiddle.net/k8vAv/
请...

    also in your desired example ether are a lot of css and js involved.<br>
    you must animate from a position to other, on hover.

我给你几个前选择:) http://jsfiddle.net/dirtyd77/SLGdE/16/

我更喜欢这个 http://jsfiddle.net/4EAnU/16/

Answer 5

$(this).children(".social-tooltip").fadeIn(100); - ＆gt; $(this).find(".social-tooltip").fadeIn(100);

与下一个相同

jQuery fadeIn（）没有给出我想要的结果

5 个答案: