切换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就会触发。如果您需要查看哪些列没有该选项，则可以在onMixFail事件中使用state获取该选项$targets.context.

$( 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