Jquery fadeOut 함수가 제대로 작동하지 않습니다.

Question

웹 페이지를 시작할 때 숨겨진 세 개의 이미지 갤러리가 있습니다. 버튼을 클릭 할 때 fadeIn 및 fadeOut 함수를 추가했습니다. 첫 번째 갤러리를 클릭 한 다음 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 :에 이미지를 저장

$('#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, 더 나은 성능에 대 한 :

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

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

노트 * 다른 모든 사진이 JQuery와 위의 그 같은 설정 변수, 선택한 모든 클릭 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>