jquery - 切换jQuery按钮时跳转内容

Question

当我切换过滤器“CM”时，在第 2、第 3 和第 4 行，内容在跳跃，我不知道为什么。

$( document ).ready(function() {

        $('.filter_content').mixItUp({
            controls: {
                enable: false // we won't be needing these
            },
            animation: {
                enable: false
            },
            callbacks: {
                onMixLoad: function(){
                    $(this).mixItUp('setOptions', {
                        animation: {
                            enable: true,
                            duration: 400,
                            effects: 'fade',
                            easing: 'ease'
                        },
                    });
                }
            }

        });

});

http://jsfiddle.net/Ly2aj687/

你能帮我解决这个问题吗？

Answer 1

我对 mixitup 不是很熟悉，但这似乎是因为您将 mixitup 应用于 filter_content ，它包含了所有选项，它将把所有内容推到顶部。在这里，我将它附加到模型上，它可以工作，但现在只要一列没有您要过滤的对象，就会触发 onMixFail。如果您需要查看哪些列没有该选项，则可以使用 state.$targets.context 在 onMixFail 事件中获取它。

$( document ).ready(function() {

 // Initialize buttonFilter code

    buttonFilter.init();

    // Instantiate MixItUp

    $('.model').mixItUp({
        controls: {
            enable: false // we won't be needing these
        },
        animation: {
            enable: false
        },
        callbacks: {
            onMixLoad: function(){
                $(this).mixItUp('setOptions', {
                    animation: {
                        enable: true,
                        duration: 400,
                        effects: 'fade',
                        easing: 'ease'
                    },
                });
            },
            onMixFail: function(state){
                //fires when there are no matches
                console.log(state.$targets.context);
                console.log(state);
            }
        }

    });

});

JSFiddle