jQuery fadeOut and fadeIn issues

Question

몇 가지 카테고리 링크가있는 포트폴리오 엄지를 필터링하고 싶습니다. Quicksand는 너무 버그가 있으며, 나는 내 자신의 코드를 작성하려고합니다. 나는 jQuery를 처음 사용하기 때문에 문제가 생길 수도 있고 과도한 코드 일 수도 있다는 것을 알았다. :)

내가 나서서 문제를 보여주는 jsFiddle을 만들어 :

http://jsfiddle.net/zHWgG/1/

가 깜박 방법보기를? 나를 완전히, 보이는 모든 페이드 필터를 클릭 한 다음에만 해당하는 엄지 손가락에 페이드에 원하는 효과는 것 그것은 노력하고 유효한 jQuery를하지만, 내가 어떻게 할 수 있어요 :.

1. 깜박 거림을 없애

2. 가 날씬하고 코드를 생성/(적은 바이트)

감사를 단순화 효과!

Answer 1

애니메이션 종료 콜백을 사용하십시오.

$('.item').fadeOut(500, function() { 
    $('.item').fadeIn(500); 
}); 

편집 : 보이지 않는 .portfolio - itens이 fadding 아웃 때문에 그들이 효과 활성화에 가시가 –을 깜박이가 발생합니다. 이것을 사용하십시오 :

$('.portfolio-item:visible').fadeOut(500, function() { 
    $('.item').fadeIn(500); 
}); 

의사 선택기 :visible는 원하는 요소를 페이드 아웃을 활성화합니다.

Answer 2

깜박임을 중지하려면, 당신은 당신의 코드에 .stop()를 추가해야합니다 ->http://api.jquery.com/stop/

http://jsfiddle.net/rrikesh/dS5zV/

$('#all').click(function() { 
     //fade out entire set (transition looks better) 
     $('.portfolio-item').stop(true,true).fadeOut(500); 
      //fadeIn all thumbs 
      $('.portfolio-item').fadeIn(500); 
     }); 
}); 

Answer 3

코드 줄이 시도 :

$('.menu_item').click(function(){ 
    var callBack = (function(itemsToShow){ 
     $('.portfolio-item:visible').fadeOut(500, function() { 
      $(itemsToShow).fadeIn(500); 
     }); 
    }); 

    switch ($(this).attr('id')){ 
     case 'all': 
      callBack('.portfolio-item'); 
      break; 
     case 'web': 
      callBack('.web'); 
      break; 
     case 'graphic': 
      callBack('.graphic'); 
      break; 
     case 'logo': 
      callBack('.logo'); 
      break; 
     case 'motion': 
      callBack('.motion'); 
      break; 

    }     
}); 

당신은에서 볼 수 있듯이을 위에서 탐색 목록에 menu_item 클래스를 추가했습니다.

http://jsfiddle.net/zHWgG/18/