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

jQuery fadeIn() not giving the result I want

本文关键字：我想要 结果 fadeIn jQuery      更新时间：2023-09-26

站点链接
如果你向下滚动一点，你会看到一些社交图标，当悬停时，它们会显示一个简单的工具提示，这是我在jQuery中使用fadeIn()对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>

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(请扩展结果窗口以查看正确的结果(

您可以使用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)
});

演示

更新

这是您的jsFiddle 的链接

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

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

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

DEMO

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

试试上面的代码，这可能会帮助你达到目标，也可以查看演示演示

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

制作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/

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

与下一个相同

相关文章：