Question

我想用一些类别链接过滤投资组合大拇指。流沙太多了，我宁愿尝试编写自己的代码。我是jQuery的新手，所以我知道我会遇到问题，可能是代码过多。：）

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

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

摆脱闪烁效应
简化/创建更精简的代码（更少字节）

谢谢！

Answer 1

使用动画结束回调。

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

修改闪烁的发生是因为不可见的.portfolio-itens是fadding-out - 它们在效果激活时变得可见。试试这个：

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

伪选择器:visible将仅为所需元素激活淡出。

Answer 2

要停止闪烁，您应该在代码中添加.stop() - ＆gt; 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/

jQuery fadeOut和fadeIn问题

3 个答案: