여러 조건문에 대해 jQuery에서 페이드 인을 추가하십시오.

Question

작업 : 클릭하면 전환 페이드 인으로 콘텐츠가 보이거나 숨겨집니다.

문제 나는이 fadein // fadeout 전환을 배치 할 위치를 추측하고 점검하고 있습니다. 또한 4 개의 조건문을 사용하기 때문에 코드가 너무 비효율적 인 것처럼 느껴집니다. 스택을 사용하면이 스크립트의 전반적인 논리를 개선 할 수있는 솔루션을 만들 수있게되어 꽤 전환 할 수 있습니다. c?

LIVE CODE

jQuery를 스크립트

$(document).ready(function() { 

//attach a single click listener on li elements 
$('li.navCenter').on('click', function() { 

    // get the id of the clicked li 
    var id = $(this).attr('id'); 

    // match current id with string check then apply filter 
    if (id == 'printInteract') { 
     //reset all the boxes for muliple clicks 
     $(".box").find('.video, .print, .web').closest('.box').show(); 

     $(".box").find('.web, .video').closest('.box').hide(); 

     $(".box").find('.print').show(); 
    } 

    if (id == 'webInteract') { 
     $(".box").find('.video, .print, .web').closest('.box').show(); 
     $(".box").find('.print, .video').closest('.box').hide(); 
     $(".box").find('.web').show(); 
    } 
    if (id == 'videoInteract') { 
     $(".box").find('.video, .print, .web').closest('.box').show(); 
     $(".box").find('.print, .web').closest('.box').hide() 
     $(".box").find('.video').show(); 
    } 
    if (id == 'allInteract') { 
     $(".box").find('.video, .print, .web').closest('.box').show(); 
    } 



}); 

HTML 선정

<nav> 
<ul class="navSpaces"> 
    <li id="allInteract" class="navCenter"> 
     <a id="activeAll" class="navBg" href="#"><div class="relativeCenter"><img src="asset/img/logo30px.png" /><h3>all</h3></div></a> 
    </li> 
    <li id="printInteract" class="navCenter"> 
     <a id="activePrint" class="navBg" href="#"><div class="relativeCenter"><img src="asset/img/print.gif" /><h3>print</h3></div></a> 
    </li> 
    <li id="videoInteract" class="navCenter"> 
     <a id="activeVideo" class="navBg" href="#"><div class="relativeCenter"><img src="asset/img/video.gif" /><h3>video</h3></div></a> 
    </li> 
    <li id="webInteract" class="navCenter"> 
     <a id="activeWeb" class="navBg" href="#"><div class="relativeCenter"><img src="asset/img/web.gif" /><h3>web</h3></div></a> 
    </li> 
</ul> 

BOX HTML

<div class="box"> 
<h1 title="Light me up"></h1> 
<div class="innerbox"> 
    <figure> 
     <img src="" /> 
    </figure> 
    <ul class="categorySelect"> 
     <li class="print"></li> 
     <li class="video"></li> 
     <li class="web"></li> 
    </ul> 
</div> 

PS. 초보자 질문

Answer 1

죄송합니다 당신은 당신의 코드를 단순화하고 같은 전환을 추가 할 수 있습니다

$(document).ready(function() { 
    //attach a single click listener on li elements 
    $('li.navCenter').on('click', function() { 
     var all = $(".box").find('.video, .print, .web'); 
     var activeCls = "." + this.id.replace("Interact", ""); 
     if (activeCls == ".all") { 
      all.closest('.box').show(); 
     } else { 
      var active = $(".box").find(activeCls); 
      active.closest('.box').show(); 
      all.not(active).closest('.box').hide(); 
     } 
    }); 
}); 

이 작업이있을 때, 당신은 .show() 및 .hide() 통화에 대한 선택의 jQuery를 전환을 대체 할 수 있습니다.

각 항목에 대해 .box 컨테이너를 숨기거나 표시하고 싶지만 숨기고 표시하는 콘텐츠의 실제 페이지 HTML을 보지 않고, 내가 원하는 것을 확신 할 수는 없습니다. . 어떤 것을 숨기거나 보여 주든 원래 코드가 아닌 hide()과 show() 모두 일관성을 유지하려고합니다.

사용할 전환을 선택할 때 여러 항목을 제거/추가 할 때 잘 작동하는 것을 사용해야합니다. fadeIn()과 fadeOut()은 아마도 아이템이 마침내 페이드 아웃 될 때 나머지 아이템이 점프하기 때문에 잘 작동하지 않을 것입니다. 무엇이 가장 잘 될지 모르겠습니다. 아마도 너비를 0으로 애니 메이팅합니다.