2

テキストリンクのフェードホバー効果を実行しようとしています。.css（）関数を使用して色を変更しようとしています。色は変化していますが、.fadeIn（）関数は機能しません。私は何を間違っているのですか、そしてそれをどのように解決しますか？

$('#menu li a').hover(
        function() {
            $(this).css('color','#fff').fadeIn();
        },
        function() {
            $(this).css('color','#000').fadeIn();
        }
    );
4

3 に答える 3

3

.fadeIn().css()inは、 funcからのテキストでフェードインしません。.fadeOut()これは、画面上のオブジェクトを表示または非表示にするために、関数とともに使用されます。色の変更をフェードインするには、使用する必要があります。これは、ここにあるこのプラグインを使用し.animate()た実際の例です。

$('a').mouseover(function(){

    // #FFFFFF = color to fade | 100 = time of fading
    $(this).animate({color:'#FFFFFF'},100);
    $(this).animate({color:'#000000'},100);

}).mouseout(function(){

    // this get called when mouse leaves.
    // Set the color to default color blue        
    $(this).animate({color:'blue'},100);

    });

.mouseover()ここで問題（再点滅と色の変更）が発生するため、ホバーを使用する方がよいことに注意してください。このバグの例： http.mouseout() ://jsfiddle.net/EFgma/54/

お役に立てれば。

于 2012-09-23T10:05:12.633 に答える
2

jQuery UI (またはjQuery color )animateを含めた後、色を指定する必要があります。

$('#menu li a').hover(
    function() { $(this).animate("color", "#FFFFFF"); },
    function() { $(this).animate("color", "#000000"); }
}

または、CSS3 トランジションを使用します (jQuery を完全に回避します)。

.menu li a {
    color: #000000;
    transition: 1s color; /*animates for 1 second*/
    -moz-transition: 1s color; /*For Firefox < 16.0*/
    -webkit-transition: 1s color; /*For WebKit (Chrome, Safari)*/
}
.menu li a:hover {
    color: #FFFFFF;
}

ただし、CSS3transitionsのサポートには制限があります。IE <= 9 ではサポートされていません (ただし、近日中にリリースされる IE10 ではサポートされます)。

于 2012-09-23T09:39:02.890 に答える
1

いつものように、「プログレッシブ エンハンスメント」アプローチを提唱したいと思います。
あなたの質問に直接答えるものではないので、この答えを受け入れないでください。

Web サイトに機能を追加しない機能は、慎重に重み付けする必要があります。リンクの色のフェードはそれほど重要ではないと思います。では、サイトにアクセスするすべての人がその「機能」のためだけに jQuery + jQuery UI をダウンロードする必要があるのはなぜでしょうか?

トランジションをサポートする人だけにトランジションを追加してください。また、このコードの保守も容易になります。また、モバイル デバイス上でハードウェア アクセラレーションも実行されます。

.menu li a {
    color: #000000;
    -webkit-transition: color 1s linear;
    -moz-transition: color 1s linear;
    -ms-transition: color 1s linear;
    transition: color 1s linear;
}
.menu li a:hover {
    color: #FFFFFFF;
}

古いブラウザ (IE <= 9) を使用している人々は、すべてのサイトが「彼らのために」開発され、他のすべてのサイトを犠牲にして開発されているわけではない場合、更新または変更する必要があることを理解するでしょう。

于 2012-09-23T09:52:23.793 に答える