jquery - jQuery 淡出和淡入问题

Question

我想用一些类别链接过滤投资组合拇指。流沙的bug太多，我宁愿自己写代码。我对 jQuery 还很陌生，所以我知道我会遇到问题，并且可能会遇到过多的代码。:)

我继续创建了一个 jsFiddle 来显示问题：

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

看看它是如何闪烁的？想要的效果是我单击一个过滤器，所有可见的都完全淡出，然后只有相应的拇指淡入。它工作且有效的 jQuery，但我怎么能：

1. 摆脱闪烁效果

2. 简化/创建更精简的代码（更少的字节）

谢谢！

Answer 1

使用动画结束回调。

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

编辑： 闪烁的发生是因为不可见的 .portfolio-itens 正在淡出 - 它们在效果激活时变得可见。尝试使用这个：

$('.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/