JQuery fadeOut関数が正常に動作しない場合があります

Question

Webページを開始すると3つの画像ギャラリーが表示されます。ボタンをクリックすると、fadeIn関数とfadeOut関数が追加されています。第1ギャラリーをクリックすると2番目と3番目は完全に動作しますが、3番目から2番目または2番目から1番目に戻る場合は、フェードアウトせずに写真が消えるだけです。私のコードで助けてくれますか？ HTML：

<section id="proteini"> 
      <h1>Galerija naših proizvoda</h1> 
      <article> 
      <h2>Odein</h2> 
      <button id="gumb1" onclick="proteini_slike()">Prikaži!</button> 
      </article> 
      <article> 
      <h2>Krethor</h2> 
      <button id="gumb2" onClick="kreatini_slike()">Prikaži!</button> 
      </article> 
      <article> 
      <h2>L-Yggdrasil</h2> 
      <button id="gumb3" onClick="carnetin_slike()">Prikaži!</button> 
      </article> 
     </section> 
     <section id="kreatini"> 
      <img id="protein1" src="pictures/placeholder2.jpg"> 
      <img id="protein2" src="pictures/placeholder3.jpg"> 

      <img id="kreatin1" src="pictures/placeholder2.jpg"> 
      <img id="kreatin2" src="pictures/placeholder3.jpg"> 

      <img id="carnetin1" src="pictures/placeholder2.jpg"> 
      <img id="carnetin2" src="pictures/placeholder3.jpg"> 
</section> 

CSS：で、あなたの画像を保存

$('#gumb1').click(function(e){ 
    $('#kreatin1').fadeOut(); 
    $('#kreatin2').fadeOut(); 
    $('#carnetin1').fadeOut(); 
    $('#carnetin2').fadeOut(); 
    $('#protein1').delay(100).fadeIn(2000); 
    $('#protein2').delay(100).fadeIn(2000); 
    }); 

    $('#gumb2').click(function(e){ 
    $('#protein1').fadeOut(); 
    $('#protein2').fadeOut(); 
    $('#carnetin1').fadeOut(); 
    $('#carnetin2').fadeOut(); 
    $('#kreatin1').delay(100).fadeIn(2000); 
    $('#kreatin2').delay(100).fadeIn(2000); 
    }); 

    $('#gumb3').click(function(e){ 
    $('#kreatin1').fadeOut(); 
    $('#kreatin2').fadeOut(); 
    $('#protein1').fadeOut(); 
    $('#protein2').fadeOut(); 
    $('#carnetin1').delay(100).fadeIn(2000); 
    $('#carnetin2').delay(100).fadeIn(2000); 
    }); 

Answer 1

使用このcode、より良いもパフォーマンスのために：

#protein1 { 
    width:45%; 
    display: none; 
    margin-top:50px; 
    margin-right:5%; 
    margin-left:2.5%; 
} 

#protein2 { 
    width: 45%; 
    display:none; 
    margin-top:50px; 
} 

ノートは*他のすべての写真は jqueryの上で、それらのように設定されています変数、すべてのクリックを6つの要素を選択し、アニメーションキューとstop（）関数について読む...

var protein1 = $('#protein1'), 
 
\t \t protein2 = $('#protein2'), 
 
\t \t kreatin1 = $('#kreatin1'), 
 
\t \t kreatin2 = $('#kreatin2'), 
 
\t \t carnetin1 = $('#carnetin1'), 
 
\t \t carnetin2 = $('#carnetin2'); 
 
\t \t 
 

 
$('#gumb1').click(function(e){ 
 
    kreatin1.stop().fadeOut(100); 
 
\t \t kreatin2.stop().fadeOut(100); 
 
\t \t carnetin1.stop().fadeOut(100); 
 
\t \t carnetin2.stop().fadeOut(100); 
 
     protein1.stop().delay(100).fadeIn(2000); 
 
\t \t protein2.stop().delay(100).fadeIn(2000); 
 
    }); 
 

 
    $('#gumb2').click(function(e){ 
 
    protein1.stop().fadeOut(100); 
 
\t \t protein2.stop().fadeOut(100); 
 
\t \t carnetin1.stop().fadeOut(100); 
 
\t \t carnetin2.stop().fadeOut(100); 
 
     kreatin1.stop().delay(100).fadeIn(2000); 
 
     kreatin2.stop().delay(100).fadeIn(2000); 
 
    }); 
 

 
    $('#gumb3').click(function(e){ 
 
\t \t kreatin1.stop().fadeOut(100); 
 
\t \t kreatin2.stop().fadeOut(100); 
 
\t \t protein1.stop().fadeOut(100); 
 
\t \t protein2.stop().fadeOut(100); 
 
     carnetin1.stop().delay(100).fadeIn(2000); 
 
     carnetin2.stop().delay(100).fadeIn(2000); 
 
    });

#wrapper > div{ 
 
\t margin-top: 5px; 
 
\t margin-right: 5px; 
 
\t float: left; 
 
} 
 
div[id^="protein"]{ 
 
\t width: 100px; 
 
\t height: 100px; 
 
\t background-color: red; 
 
\t display: none; 
 
} 
 
div[id^="kreatin"]{ 
 
\t width: 100px; 
 
\t height: 100px; 
 
\t background-color: green; 
 
} 
 
div[id^="carnetin"]{ 
 
\t width: 100px; 
 
\t height: 100px; 
 
\t background-color: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<section id="proteini"> 
 
      <h1>Galerija naših proizvoda</h1> 
 
      <article> 
 
      <h2>Odein</h2> 
 
      <button id="gumb1">Prikaži!</button> 
 
      </article> 
 
      <article> 
 
      <h2>Krethor</h2> 
 
      <button id="gumb2">Prikaži!</button> 
 
      </article> 
 
      <article> 
 
      <h2>L-Yggdrasil</h2> 
 
      <button id="gumb3">Prikaži!</button> 
 
      </article> 
 
     </section> 
 
<section id="wrapper"> 
 
\t \t \t \t <div id="protein1"></div> 
 
\t \t \t \t <div id="protein2"></div> 
 

 
\t \t \t \t <div id="kreatin1"></div> 
 
\t \t \t \t <div id="kreatin2"></div> 
 

 
\t \t \t \t <div id="carnetin1"></div> 
 
\t \t \t \t <div id="carnetin2"></div> 
 
</section>