Question

我有一些风格如此的文章

padding-bottom: 125px
padding-top: 125px
border-bottom: 1px solid rgba(0,0,0,0.1)
&:first-of-type
    padding-top: 0
    &:last-of-type
        padding-bottom: 0
            border-bottom: none

我有一个脚本会导致所有没有类似类的文章在点击类别时淡出淡出

// Category Switching
$('.cats span').click(function(){
    console.log('click');
    var cat = $(this).attr('class');
    if(cat == 'all'){
        $('.articles').find('article').fadeIn();
    } else {
        $('.articles').find('article:not(.'+cat+')').fadeOut();
    }
});

显而易见的是，第一篇文章可能不再是第一篇文章了，因此帖子顶部的填充，以及底部填充的最后一篇文章，需要是取消了，但由于CSS已经渲染，因此不知道DOM中有变化。

如何让CSS重新评估DOM并在此脚本运行后看到这些更改？

Answer 1

您可以选择所有可见元素，因此在您执行fadeIn和fadeOut后，您可以选择所有.articles：可见。

docs：

http://api.jquery.com/visible-selector/

然后，您可以选择第一个和最后一个dom元素，并为它们提供.last_article and。first_article` css类。

（例如，这些类应该有你的顶部和底部填充）

强制css重新渲染

1 个答案: