0

我正在使用以下函数来控制一些社交网络图标的翻转效果。大部分功能（不包括 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>

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

4

2 回答 2

1

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

$(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");
                });
            }
    });
});​
于 2012-12-10T18:27:58.033 回答
0

您的 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");
    })
});​
于 2012-12-10T18:35:02.007 回答