Question

我正在使用以下功能来控制某些社交网络图标的翻转效果。函数的大部分（不包括addClass / removeClass部分）完美地工作，但我需要包含addClass / removeClass部分作为默认图标状态渗入图标边缘周围的悬停状态。我遇到的问题是我无法弄清楚如何正确延迟函数的addClass / removeClass部分，并可以使用一些帮助。我需要能够将函数的该部分减慢与函数的主要部分大致相同的量。

$(function () {
    $("#fb span, #yt span, #tw span, #sc span, #it span, #my span").css({
        opacity: "0"
    }).mouseover(function () {
        $(this).stop().animate({
            opacity: "1"
        }, {
            duration: 250
        })
        $(this).parent().addClass("nobg");
    }).mouseout(function () {
        $(this).stop().animate({
            opacity: "0"
        }, {
            duration: 250
        })
        $(this).parent().addClass("nobg");
    })
});

供您参考，我正在使用的HTML如下所示：

<ul>
    <li><a href="#" target="_blank"><div id="fb">Facebook<span></span></div></a></li>
    <li><a href="#" target="_blank"><div id="yt">YouTube<span></span></div></a></li>
    <li><a href="#" target="_blank"><div id="tw">Twitter<span></span></div></a></li>
    <li><a href="#" target="_blank"><div id="my">myspace<span></span></div></a></li>
    <li><a href="#" target="_blank"><div id="sc">Soundcloud<span></span></div></a></li>
    <li><a href="#" target="blank"><div id="it">iTunes<span></span></div></a></li>
</ul>

提前感谢您提供的任何帮助！

Answer 1

jQuery animate()有一个回调函数，使用它会延迟添加类，直到动画完成。另一方面，为什么要两次添加同一个类？

$(function () {
    $("#fb span, #yt span, #tw span, #sc span, #it span, #my span")
        .css('opacity', '0')
        .on({
            mouseenter: function () {
                $(this).stop().animate({opacity: 1}, 250, function() {
                    $(this).parent().addClass("nobg");
                });
            },
            mouseleave: function () {
                $(this).stop().animate({opacity: 0}, 250, function() {
                    $(this).parent().addClass("nobg");
                });
            }
    });
});

Answer 2

你的CSS实现有点偏，但是稍微修改一下你的jQuery，这可能就是你想要的吗？

http://jsfiddle.net/dboots/6zDhE/

$(function () {
    //-- init link span opacity to 0
    $("#fb span, #yt span, #tw span, #sc span, #it span, #my span").css({
        opacity: "0"
    });

    //-- add mouseover/mouseout event handler to the span parents
    $('#fb, #yt, #tw, #sc, #it, #my').mouseover(function () {

        //-- find the current span element we are working with.
        var el = $(this).find('span');

        el.stop().animate({
            opacity: "1"
        }, {
            duration: 250
        })
        el.parent().addClass("nobg");
    }).mouseout(function () {
        var el = $(this).find('span');
        el.stop().animate({
            opacity: "0"
        }, {
            duration: 250
        })
        el.parent().addClass("nobg");
    })
});

关于你的CSS有点偏差，如果你向你的父div添加类并以这种方式引用它，那么维护会更容易。

例如：

http://jsfiddle.net/dboots/6zDhE/1/

HTML：

<ul>
    <li><a href="#" target="_blank"><div class="social_link" id="fb">Facebook<span>1</span></div></a></li>
    <li><a href="#" target="_blank"><div class="social_link" id="yt">YouTube<span>2</span></div></a></li>
    <li><a href="#" target="_blank"><div class="social_link" id="tw">Twitter<span>3</span></div></a></li>
    <li><a href="#" target="_blank"><div class="social_link" id="my">myspace<span>4</span></div></a></li>
    <li><a href="#" target="_blank"><div class="social_link" id="sc">Soundcloud<span></span></div></a></li>
    <li><a href="#" target="_blank"><div class="social_link" id="it">iTunes<span></span></div></a></li>
</ul>

JS：

$(function () {
    //-- This should probably be accomplished via CSS instead?
    //-- ex.) .social_link span { display: none; }

    $('.social_link span').css({
        opacity: "0"
    });

    $('.social_link').mouseover(function () {
        var el = $(this).find('span');
        el.stop().animate({
            opacity: "1"
        }, {
            duration: 250
        })
        el.parent().addClass("nobg");
    }).mouseout(function () {
        var el = $(this).find('span');
        el.stop().animate({
            opacity: "0"
        }, {
            duration: 250
        })
        el.parent().addClass("nobg");
    })
});

jQuery：addClass和removeClass的delay / setTimeOut

2 个答案: