Question

我想更改对象的不透明度，而不是淡化完全隐藏的内容，以便我更改

$(".thumb").each(function(i) {
    $(this).delay(500*i).fadeIn(1000);
});

到

$(".thumb").each(function(i) {
    $(this).delay(500*i).animate({'opacity' : 1}, 1000, function(){});
});

和显示的css：none到不透明度：0; （在所有浏览器中）但我注意到数字值 1000 根本没有做任何事情......也许它是，我没有注意到，但我已经将表格1改为100000而且我看不到区别。有人可以帮我理解发生了什么吗？

编辑：这是完整的代码..也许有些东西正在改变淡入淡出？

//Showcase
$('#showcase').animate({'opacity' : 0}, 0);
fadeInDivs(['#showcase']);

function fadeInDivs(els) {
    e = els.pop();
    $(e).delay(750).animate({'opacity' : 1}, 1000, function(){
        if (els.length)
            fadeInDivs(els);
    });
};

$('#showcase').queue(function(){
    //fade in each filter
    $('#filters li').each(function(i, item) {
        setTimeout(function() { $(item).animate({'opacity' : 1}, 1000); }, 500 * i);
    });

    //fade in each thumbnail
    $('.thumb').each(function(i, item) {
        setTimeout(function() { $(item).animate({'opacity' : 1}, 1000); }, 500 * i);
    });
});

这是造成问题的原因..

<script type="text/javascript">
var $container = $('.isosort')
// initialize Isotope
$container.isotope({
        // options...
        resizable: false, // disable normal resizing
        layoutMode : 'fitRows',
        animationEngine : 'best-available',

        // set columnWidth to a percentage of container width
        masonry: { columnWidth: $container.width() / 5 }
});

// update columnWidth on window resize
$(window).smartresize(function(){
        $container.isotope({
        // update columnWidth to a percentage of container width
        masonry: { columnWidth: $container.width() / 5 }
        });
});
    $('#filters a').click(function(){
        var selector = $(this).attr('data-filter');
        $container.isotope({ filter: selector });
        return false;
    });
</script>

它位于</body>标记之前的index.php文件的底部..是否有更好的地方放这个？

Answer 1

我认为这就是你想要的

$(".thumb").each(function(i, item) {
    setTimeout(function() { $(item).animate({'opacity' : 1}, 1000); }, 500 * i);
});

Answer 2

我注意到数字值1000根本不做任何事情

你有什么期望呢？这是函数完成动画周期所需的时间（以毫秒为单位）。

请参阅：

看到这个小提琴：

http://jsfiddle.net/UsMAD/

设置值越高，fadeIn或animate完全淡入元素所需的时间越长。

更新

使用动画页面的整个javascript更新热门帖子

新代码会隐藏#showcase，但不会隐藏#filters li或.thumb元素。因此，当您淡入展示时，过滤器和拇指已经可见。应用于它们的fadeIn效果将不会显示，因为您已经达到100％的不透明度。

这是对您的代码的修改，应该解决该问题。特别是，我在设置opacity值时选择了所有这些项目：

http://jsfiddle.net/eU9qU/

//Showcase
$('#showcase, #filters li, .thumb').css('opacity', 0);
fadeInDivs(['#showcase']);

function fadeInDivs(els) {
    e = els.pop();
    $(e).delay(750).animate({'opacity' : 1}, 10000, function(){
        if (els.length)
            fadeInDivs(els);
    });
};

$('#showcase').queue(function() {
    //fade in each filter
    $('#filters li').each(function(i, item) {
        $(item).delay(500*i).animate({'opacity' : 1}, 10000);
    });

    //fade in each thumbnail
    $('.thumb').each(function(i, item) {
        $(item).delay(500*i).animate({'opacity' : 1}, 10000);
    });
});

为什么fadeIn和动画持续时间不适用于我的代码？

2 个答案:

更新