Jquery fadeOut function not properly working sometimes

Question

I have three image gallerys that are hidden when you start a web page. I have put fadeIn and fadeOut functions on them when you click the button. When I click on 1st gallery, then on 2nd and on 3rd it works perfectly, but when I want to go back from 3rd to 2nd or 2nd to 1st and so on, my pictures just disappear without fading out. Can you help me with my code ? 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;
}

note* All other pictures are set like those above 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

use this code, for better perfomance save your images in variables, every click you select 6 elements, read about animation queue and stop() function...

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

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

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

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

#wrapper > div{
 margin-top: 5px;
 margin-right: 5px;
 float: left;
}
div[id^="protein"]{
 width: 100px;
 height: 100px;
 background-color: red;
 display: none;
}
div[id^="kreatin"]{
 width: 100px;
 height: 100px;
 background-color: green;
}
div[id^="carnetin"]{
 width: 100px;
 height: 100px;
 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">
    <div id="protein1"></div>
    <div id="protein2"></div>

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

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