Прыжки содержимого при переключении кнопки 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, используя состояние. $ Target.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