jQuery fadeIn() 没有给出我想要的结果答案

【问题标题】：jQuery fadeIn() not giving the result I wantjQuery fadeIn() 没有给出我想要的结果
【发布时间】：2014-07-30 09:23:14
【问题描述】：

Site Link
如果你向下滚动一点，你会看到一些社交图标，当它们悬停时会显示一个简单的工具提示，这是我在 jQuery 中使用 fadeIn() 在 hover() 事件中制作的。所以问题是我想要这个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（请扩大结果窗口以查看正确的结果）

【问题讨论】：

你能把这个小提琴加给我吗。
您还必须为位置设置动画，所以fadeIn 是不够的。你应该这样做：悬停，然后动画不透明度（这就是淡入淡出所做的）和位置。
添加你的css样式
您也可以通过 css 通过在悬停时定位和动画来实现它
@Benjamin 添加了一些 CSS

标签： javascript jquery html css icons

【解决方案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的链接

【讨论】：

非常感谢你，但你能把它应用到给定的小提琴上吗？
再次非常感谢您

【解决方案2】：

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

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

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

DEMO

【讨论】：

非常感谢，但我没有质疑

【解决方案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

如果这对你有用，请竖起大拇指

【讨论】：

【解决方案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/

【讨论】：

【解决方案5】：

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

和下一个一样

【讨论】：

天啊...你的 .social-tooltip 类在哪里？