Question

我在http://www.helvar.nl/nieuws

上构建了一个过滤器

但它非常小问题，我尝试了所有可能有用的内容

.stop（）和删除所有css转换

但没有任何帮助..

有人可能会帮忙解决最新情况吗？

我的javascript：

    var oldCategory = false;
    var wrapper = "#news-container";

    function filter(categoryId){
        $('.filter-list li').removeClass('active');
        $(this).addClass('active');
        currentHeight = $(wrapper).height(); 
        console.log('currentHeight ', currentHeight);

        $('.mix2').hide();
        $('.category-'+categoryId).show();

        contentHeight = $(wrapper).height();
        console.log('contentHeight ', contentHeight);

        $(wrapper).height(currentHeight);
        $(wrapper).delay(100).animate(
            {
                height: contentHeight
            },
            200, 
            function(){
                $(wrapper).height('auto');
            }
        );

        $('.mix2').hide();
        if(oldCategory){
            $('.category-'+oldCategory).show();
            $('.category-'+oldCategory).stop().fadeOut(function(){
                $('.category-'+categoryId).show();
            });
        } else {
            $('.mix2').show();
            $('.mix2').stop().fadeOut(function(){
                $('.category-'+categoryId).show();
            });
        }
        oldCategory = categoryId;
    }
    function showAllFiltered(){
        $('.mix2').fadeIn('200');
    };
    $(function() {
        $('.filter-list li, .filter-list-mobile li').click(function(){
            $('.filter-list li, .filter-list-mobile li').removeClass('active');
            $(this).addClass('active');
        });
    });

Answer 1

所以我想出了问题所在。

就在这段代码中：

$(wrapper).delay(100).animate(
   {
       height: contentHeight
    },
    200, 
    function(){
       $(wrapper).height('auto');
    }
);

动画首先进入contentHeight，然后在该动画之后将高度设置为＆＃39; auto＆＃39;所以当我这样做时它就会闪烁。

我必须找到另一种动画高度的方法。

为什么我的过滤器有问题？

1 个答案: