javascript - 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;
}

注意*所有其他图片均如上设置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>