Jquery fadeOut 功能有时无法正常工作

Question

当您启动网页时，我有三个隐藏的图片库。当您单击按钮时，我已在它们上放置了 fadeIn 和 fadeOut 功能。当我点击第一个画廊时，然后在第二个和第三个它完美地工作，但是当我想从第三个回到第二个或第二个到第一个等等时，我的图片只是消失而不会淡出。你能帮我写代码吗？ 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* 其他图片均设置如上 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，为了获得更好的性能，将图像保存在变量中，每次点击选择 6 个元素，阅读动画队列和 stop() 函数...

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>