0

ページの読み込み時に一定時間遅延してからフェードアウトする必要があるヘッダーがあります。ここでテストできます。コードも追加します。

html

<header id="main-header">
    <div id="inner"></div>
</header>

CSS

#main-header {height: 70px;}
#inner {height: 70px; background: red;}

JavaScript

$(function() {
    $('#inner').stop().delay(2300).animate({"opacity": "0"}, 1500);
    $('#main-header').hover(
    function() {$('#inner').stop().animate({"opacity": "1"}, 1000);},
    function() {$('#inner').stop().animate({"opacity": "0"}, 1500);}
);
});

カーソルをその領域に合わせると、フェードインします。

ユーザーが最初の遅延/フェードアウトが完了するまで待機すると、すべてが問題なく動作しますが、最初の遅延/フェードアウトが完了する前にカーソルがヘッダーの上に移動すると問題が発生します。上記のリンクを参照してください。

この場合、2300ミリ秒の間、ホバーの初期化を遅らせる必要があると考えていますが、誰かがより良い解決策を持っている場合は、それをいただければ幸いです。ありがとうございました！

4

2 に答える 2

0

ユーザーが最初にヘッダー上を移動したときに最初のフェードアウトが発生するのを防ぐため、これはうまくいくはずです。

$(function() {

    var tictac      = setTimeout( function() { $('#inner').animate({"opacity": "0"}, 1500); }, 2300 )

    $('#main-header').hover(
        function() {
            clearTimeout(tictac);   
            $('#inner').stop().animate({"opacity": "1"}, 1000);
        },
        function() { $('#inner').stop().animate({"opacity": "0"}, 1500);}
    );

});

注意: 最初のデモは、HTML5 タグを使用しているため、9 未満の IE では動作しません。

于 2012-07-12T17:27:29.127 に答える
0

<header>IE9 より前の IE では使用できないタグを使用しています。これが、IE9 より前でスクリプトが機能しない原因です。私が知る限り、現在の状態では Chrome、Firefox、および IE9 で完全に動作します。

HTML :

<div id="main-header">
    <div id="inner"></div>
</div>

JS :

$(function() {
    $('#inner').stop().delay(2300).animate({"opacity": "0"}, 1500);
    $('#main-header').hover(
        function() {$('#inner').stop().animate({"opacity": "1"}, 1000);},
        function() {$('#inner').stop().animate({"opacity": "0"}, 1500);}
    );
});

ライブデモ

于 2012-07-12T17:47:30.867 に答える