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()にはコールバック関数があり、それを使用すると、アニメーションが完了するまでクラスの追加が遅れます。一方、なぜ同じクラスを2回追加するのですか？

$(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 に答える