1

.trans{ -webkit-transition:background-position 0.2s; }

ナビゲーション メニュー項目があり、それぞれに上記のトランジションを追加しました。

また、JQuery ホバーは次のように機能します。

$(".menuUL li").mouseover(function () { $(this).css({'background-position':'center top','color':'white'});}); $(".menuUL li").mouseout(function () {
if(this.id == currentTab) {$(this).css({'background-position':'center top','color':'white'});} else {$(this).css({'background-position':'center bottom','color':'#0196e3'});}});

そしてクリック機能でコンテンツをチャンスに:

` $(".menuUL li").click(function(){

        $(".menuUL li").not(this).css({'background-position':'center bottom','background-color':'#666666','color':'#0196e3'});
        $(this).css({'background-position':'center top','background-color':'#CCCCCC','color':'white'});});

`

問題は、メニュー項目をクリックして、遷移が完了する前に突然 (<200ms で) 要素 (mouseout) を離れる場合です。逆遷移が発生し、クリックされたメニュー要素の背景位置が最初の位置に戻ります。

$(this).endtransition() のようなコードが必要です

助けていただけますか?

4

0 に答える 0