mixItUp jQueryプラグインが動作しない

Question

私はmixitupのドキュメント の指示に従っていますが、プラグインはまだ動作していません。

プラグインで動作するのは、画像を移動したときにページを更新するときだけですが、ビデオやコーヒーやモバイルをクリックしたときには何も起こりません。 ！どのように

//script 
 
$('#Container').mixItUp();

.portfolio { 
 
    height: 400px; 
 
} 
 
.portfolio h2 { 
 
    margin: 0; 
 
    padding-top: 50px; 
 
    padding-bottom: 40px; 
 
    font-weight: normal; 
 
} 
 
.portfolio ul li { 
 
    display: inline-block; 
 
    color: #555; 
 
    border: 2px solid #DDD; 
 
    padding: 10px 20px 10px 20px; 
 
} 
 
.portfolio ul { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.portfolio ul li.active { 
 
    background-color: #1abc9c; 
 
    border: 2px solid #1abc9c; 
 
    color: white; 
 
} 
 
.gallery { 
 
    margin: 40px 0 0 0; 
 
} 
 
.gallery .row div { 
 
    width: 30.3333%; 
 
    float: left; 
 
    position: relative; 
 
    margin: 5px; 
 
} 
 
.gallery .row img { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.gallery .row .g-overlay { 
 
    position: absolute; 
 
    top: -6px; 
 
    left: -5px; 
 
    width: 100%; 
 
    height: 100%; 
 
    /*background-color: rgba(0,0,0,.7);*/ 
 
    background-color: #1abc6c; 
 
    opacity: 0.9; 
 
    display: none; 
 
} 
 
.gallery .row .g-overlay h3 { 
 
    color: #FFF; 
 
    text-align: center; 
 
    line-height: 180px; 
 
} 
 
.gallery .row .g-overlay span.heart { 
 
    position: absolute; 
 
    bottom: 10px; 
 
    color: white; 
 
    right: 10px; 
 
} 
 
.gallery .row div:hover .g-overlay { 
 
    display: block; 
 
} 
 
/* Mixit up plugin*/ 
 

 
#Container .mix { 
 
    display: none; 
 
}

<div class="portfolio"> 
 
    <div class="container"> 
 
    <h2>Projects</h2> 
 
    <ul> 
 
     <li class="active filter" data-filter="all">All</li> 
 
     <li class="filter" data-filter=".mobile">Mobile</li> 
 
     <li class="filter" data-filter=".coffee">Coffee</li> 
 
     <li class="filter" data-filter=".video">video</li> 
 
    </ul> 
 
    <div id="Container" class="gallery"> 
 
     <div class="row"> 
 
     <div class="mix mobile"> 
 
      <img src="images/gallery/1.jpg"> 
 
      <div class="g-overlay"> 
 
      <h3>Read More</h3> 
 
      <span class="heart"><i class="fa fa-heart" aria-hidden="true"></i> 14</span> 
 
      </div> 
 
     </div> 
 
     <div class="mix coffee"> 
 
      <img src="images/gallery/2.jpg"> 
 
      <div class="g-overlay"> 
 
      <h3>Read More</h3> 
 
      <span class="heart"><i class="fa fa-heart" aria-hidden="true"></i> 14</span> 
 
      </div> 
 
     </div> 
 
     <div class="mix video"> 
 
      <img src="images/gallery/3.jpg"> 
 
      <div class="g-overlay"> 
 
      <h3>Read More</h3> 
 
      <span class="heart"><i class="fa fa-heart" aria-hidden="true"></i> 14</span> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="row"> 
 
     <div class="mix video"> 
 
      <img src="images/gallery/4.jpg"> 
 
      <div class="g-overlay"> 
 
      <h3>Read More</h3> 
 
      <span class="heart"><i class="fa fa-heart" aria-hidden="true"></i> 14</span> 
 
      </div> 
 
     </div> 
 
     <div class="mix mobile"> 
 
      <img src="images/gallery/5.jpg"> 
 
      <div class="g-overlay"> 
 
      <h3>Read More</h3> 
 
      <span class="heart"><i class="fa fa-heart" aria-hidden="true"></i> 14</span> 
 
      </div> 
 
     </div> 
 
     <div class="mix coffee"> 
 
      <img src="images/gallery/6.jpg"> 
 
      <div class="g-overlay"> 
 
      <h3>Read More</h3> 
 
      <span class="heart"><i class="fa fa-heart" aria-hidden="true"></i> 14</span> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

DOM準備に関数にJSを入れてはどうですか？ 。

$(function(){ 
    $('#Container').mixItUp(); 
}); 

Answer 2

それが動作します。.. このコード $（ '＃コンテナ'）mixItUp（）;

は、jsコードの最初にある必要があります。