.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() のようなコードが必要です
助けていただけますか?