jQuery淡出和淡入問題

Question

我想用幾個分類鏈接過濾投資組合大拇指。流沙太麻煩了，我寧願寫我自己的代碼。我對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/