0

このデモでは、ランディング ページの後にbtn2(緑色の領域) が表示され、ユーザーには 2 つのオプションがあります。

1. ユーザーが何もしない - setTimeout()
2. ユーザーがカーソルを合わせてbtn2- 表示btn3(青)。
2.にホバーして表示した後、立ち往生しましbtn2たbtn3。btn1(赤) まだフェードイン キャンセルするには？

任意の提案をいただければ幸いです。 

<div class="btn btn1"></div>
<div class="btn btn2"></div>
<div class="btn btn3"></div>
.btn{
width: 200px;
position: absolute;
}
.btn1{
background-color: red;
height: 100px;
width: 100px;
}
.btn2{
background-color: green;
height: 200px;
opacity: 0.3;
display: none;
}
.btn3{
background-color: blue;
height: 200px;
opacity: 0.3;
display: none;
}

jQuery

$(function(){
function navctr(){
    //landing
    $('.btn1').hide();
    $('.btn2').show();
    setTimeout(function(){
        $('.btn2').fadeOut(50);
        $('.btn1').fadeIn(50);
    }, 2250);
    //after click
    $('.btn1').click(function(){
        $('.btn1').fadeOut(100);
        $('.btn2').delay(100).fadeIn(50);
    });
    //both
    $('.btn2').hover(function(){
        $('.btn2').hide();
        $('.btn3').fadeIn(100);
    });
    $('.btn3').mouseleave(function(){
        $('.btn3').fadeOut(50);
        $('.btn1').fadeIn(100);
    });
};
navctr();
});
4

1 に答える 1

2

メソッドclearTimeout():ドキュメントを使用すると、ドキュメントに以前に設定されたタイムアウトが削除されます。

あなたのコードでは、次のようになります。

$(function(){
function navctr(){
    var myTimeout;
    //landing
    $('.btn1').hide();
    $('.btn2').show();
    myTimeout = setTimeout(function(){
        $('.btn2').fadeOut(50);
        $('.btn1').fadeIn(50);
    }, 2250);
    //after click
    $('.btn1').click(function(){
        $('.btn1').fadeOut(100);
        $('.btn2').delay(100).fadeIn(50);
    });
    //both
    $('.btn2').hover(function(){
        $('.btn2').hide();
        $('.btn3').fadeIn(100);
        clearTimeout(myTimeout); // remove the setTimeout
    });
    $('.btn3').mouseleave(function(){
        $('.btn3').fadeOut(50);
        $('.btn1').fadeIn(100);
    });
};
navctr();
});
于 2012-12-05T12:37:12.700 に答える