0

我有一些文章的风格是这样的

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 并在此脚本运行后查看这些更改？

4

1 回答 1

0

你可以选择所有可见的元素，所以在你完成之后，你可以选择所有可见fadeIn的fadeOut元素.articles。

文档：

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

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

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

于 2014-06-06T15:55:44.347 回答