JQuery fadeOut функция не работает должным образом

Question

У меня есть три галереи изображений, которые скрыты при запуске веб-страницы. Я надел кнопки 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:

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

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

примечание * Все другие изображения устанавливаются как те выше Jquery:

$('#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, для лучшего Perfomance сохранять изображения в переменные, каждый щелчок вы выбираете 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>