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

如果你向下滚动一点，你会看到一些社交图标，当鼠标悬停时，它们会显示一个简单的工具提示，这是我在jQuery中使用

fadeIn（）

on

hover（）

事件制作的。所以问题是我希望在这个页面中有类似的内容（向下滚动一点以查看图标）。如何使用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>

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

.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;
}

相关CSS:

<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>

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

.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;
}

（请将结果窗口扩大以查看正确的结果）

$（此）.children（“.social tooltip”）.fadeIn（100）-->
$（this）.find（“.social tooltip”）.fadeIn（100）

与下一个相同
您可以使用
动画

$(".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)
});


更新

这里是指向您的
的链接，如果您想为图标提供淡入效果，请使用以下类

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

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


试试上面的代码，这可能会帮助你实现你的目标，也可以检查演示

如果这对u有效，请竖起大拇指
请

    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.

在您想要的示例中，还涉及大量css和js。

悬停时，必须从一个位置设置动画到另一个位置。

我给你几个前男友供你选择：）


我更喜欢这个

天哪。。。你的社交工具提示类在哪里？你能为我添加小提琴吗？你也必须为这个位置设置动画，所以fadeIn是不够的。您应该执行以下操作：悬停，然后设置不透明度动画（fadeIn就是这样做的）还有position.addurcss样式你也可以通过css在上面发布和设置动画来实现它hover@Benjamin添加了一些CST谢谢你真的非常感谢，但是你能把它应用到给定的小提琴上吗？再次非常感谢你非常感谢，但是我没有对此提出疑问