Question

启动网页时，我有三个隐藏的图像画廊。单击按钮时，我已在其上添加了fadeIn和fadeOut函数。当我点击第一个画廊，然后在第二个和第三个时它完美地工作，但是当我想从第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，以便更好地保存图像中的变量，每次点击选择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>

Jquery fadeOut函数有时不能正常工作

1 个答案: