切換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，它包含所有選項，它會將所有選項推到頂端。在這裏，我將它附加到模型上，它將起作用，但是現在，當列沒有您要過濾的對象時，就會在MixFail上觸發。如果您需要查看哪些列沒有該選項，則可以使用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