ナビゲーションメニューでオプションをクリックすると他の2つがフェードアウトするアニメーションを作成しようとしています.fadeToggleが私の配置に問題があったため不透明度をアニメーション化することにしました0をクリックし、再度クリックすると1に戻ります。（私は、コードは以下のダウン掲示CSSを出て左）
https://jsfiddle.net/L703yvke/Jqueryでアニメーションを切り替える方法

<div id='bckDrp'> 
    <div id='nav'> 
    <ul id='navLst'> 
     <li class='navOp' id='hme'>Home</li> 
     <li class='navOp' id='abt'>About</li> 
     <li class='navOp' id='prt'>Portfolio</li> 
    </ul> 
    </div> 
</div>

var main = function(){ 
    $('#hme').click(function(){ 
    $('#abt, #prt').animate({opacity: 0},300); 
    }); 
    if($('#abt, #prt').css('opacity') == 0) { 
    $('#hme').click(function(){ 
     $('#abt, #prt').animate({opacity: 1},300); 
    } 
)}; 
} 

$(document).ready(main);

2016-08-26 Joshua

main機能は一度だけ実行されます。だからあなたはそのことを一度だけif-statementしています。また、私はあなたがそれを行うことを期待しているとは思わないバインディングclickイベントです。代わりに、あなたは単にif-elseを使用すると、クリックイベント内のあなたの状態を持つことができます。

var main = function(){ 
    $('#hme').click(function(){ 
    if($('#abt, #prt').css('opacity') == 0) 
     $('#abt, #prt').animate({opacity: 1},300); 
    else 
     $('#abt, #prt').animate({opacity: 0},300); 
    }); 
}

Demo

出典

2016-08-26 00:44:30

ができます：JSコードは一度だけロードされ、この瞬間にあなたの文章は、（あれば）のみ。これはあなたのためのソリューションがある

.loadedイベント（）で読み込まれているため、これが必要ですたくさんありがとう！ – Joshua

私は重くCSSの遷移とアニメーションを処理し、単にクラスを切り替えることをお勧めします。

CSS

#abt, #prt{ 
    opacity:1; 
    transition: opacity 300s; 
} 

#abt.hide, #prt.hide{ 
    opacity:0; 
}

jQueryの

$('#hme').on('click', function(){ 
    $('#abt, #prt').toggleClass('hide'); 
});

出典

2016-08-26 00:47:43

変更してコード：

var main = function() { 

    $('#hme').click(function(){ 

     var op = $('#abt, #prt').css('opacity'); 

     if (op == 1) 
      $('#abt, #prt').animate({opacity: 0},{duration:300}); 

     else if(op == 0) 
      $('#abt, #prt').animate({opacity: 1},{duration:300});   
    }) 
} 

$(document).ready(function(){ 
    main(); 
})

決勝コード：

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
</head> 
 
<body> 
 
    <div id='bckDrp'> 
 
    <div id='nav'> 
 
    <ul id='navLst'> 
 
     <li class='navOp' id='hme'>Home</li> 
 
     <li class='navOp' id='abt'>About</li> 
 
     <li class='navOp' id='prt'>Portfolio</li> 
 
    </ul> 
 
    </div> 
 
</div> 
 
    
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script> 
 
var main = function() { 
 
    
 
    $('#hme').click(function(){ 
 
     
 
     var op = $('#abt, #prt').css('opacity'); 
 
     
 
     if (op == 1) 
 
      $('#abt, #prt').animate({opacity: 0},{duration:300}); 
 
     
 
     else if(op == 0) 
 
      $('#abt, #prt').animate({opacity: 1},{duration:300});   
 
    }) 
 
} 
 
          
 
$(document).ready(function(){ 
 
    main(); 
 
}) 
 
    </script> 
 
</body> 
 
</html>

出典

2016-08-26 00:48:55 Ehsan

最初に、あなたはタイプミスがありました.... )};括弧は逆です。彼らは、toggleClass();関数を組み込み、それぞれを参照する必要がなく、クリックされた要素を動的に取得するだけで、多くのものを簡略化できます。idが使用されています。これは、#navリストから追加/削除することができ、その要素がidに関係なく機能することを意味します。「フェード」はすべてCSSで処理されるため、関数をまったく編集する必要はありません。

ここで編集する必要があるのは、HTML内の項目をナビゲートすることです。あなたはあなたのコードは、コールバック.click内で、場合文で設定必要

var main = function(){ 
 
    $('#nav li').on('click', function() { 
 
     var thisNav = $(this); 
 
     thisNav.toggleClass('active'); 
 
     $('#nav li').not(thisNav).toggleClass('fadeit'); 
 
    }); 
 
} 
 

 
$(document).ready(main);

ul { list-style: none; margin: 10px; padding:0; } 
 

 
li { 
 
     display: block; 
 
     padding: 5px 10px; 
 
     margin: 10px 0; 
 
     text-align: center; 
 
     text-transform: uppercase; 
 
     background: #eee; 
 
     border: 1px solid #ddd; 
 
    
 
     /* below handles the opacity fade */ 
 
     opacity: 1; 
 
     transition: all 1s; } 
 

 

 
.active, li:hover { background: #fee; } 
 

 
/* below handles the opacity fade */ 
 
.fadeit { opacity: 0; transition: all 1s; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='bckDrp'> 
 
    <div id='nav'> 
 
    <ul id='navLst'> 
 
     <li class='navOp' id='hme'>Home</li> 
 
     <li class='navOp' id='abt'>About</li> 
 
     <li class='navOp' id='prt'>Portfolio</li> 
 
    </ul> 
 
    </div> 
 
</div>

出典

2016-08-26 01:30:54 Scott

（...彼らが変更された場合）。

var main = function(){ 
    $('#hme').click(function(){ 
     $('#abt, #prt').animate({opacity: 0},300); 
     if($('#abt, #prt').css('opacity') == 0) { 
      $('#abt, #prt').animate({opacity: 1},300); 
     }else{ 
      $('#abt, #prt').animate({opacity: 0},300); 
     }; 
    }); 
} 

$(document).ready(main);

出典

2016-08-26 01:38:13 mrjusepelo

Jqueryでアニメーションを切り替える方法

答えて

CSS

jQueryの

関連する問題