2017-03-05 7 views
0

のいずれかのオプションは、showStaggeredListです。これは、すべてのリストアイテムフォームを左から右にスライドさせます。右から左へスライドすることは可能ですかjsfiddle例が左から右のjavascriptのコールのfuctionマテリアライズshowStaggeredList

var options = [ 

     {selector: '#staggered-test', offset: 400, callback: function(el) { 
     Materialize.showStaggeredList($(el)); 
     } } 

    ]; 
    Materialize.scrollFire(options); 

https://jsfiddle.net/2qg18zzb/

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css"> 
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script> 
<h3>Scroll down</h3> 
<br> 
<br> 
<br> 
<br> 
<br> 
<br> 
<br> 
<br> 
<br> 
<br> 
<br> 
<br> 
<br> 
<br> 
<br> 
<br> 

<ul id="staggered-test"> 
      <li> 
      <h4><a href="#">List Item</a></h4> 
      <p>This is a description</p> 
      </li> 
      <li> 
      <h4><a href="#">List Item</a></h4> 
      <p>This is a description</p> 
      </li> 
      <li> 
      <h4><a href="#">List Item</a></h4> 
      <p>This is a description</p> 
      </li> 
      <li> 
      <h4><a href="#">List Item</a></h4> 
      <p>This is a description</p> 
      </li> 
      <li> 
      <h4><a href="#">List Item</a></h4> 
      <p>This is a description</p> 
      </li> 
     </ul> 

私はそれがを右から左に形成する必要があります。

答えて

0

私はmaterialize.jsを編集する必要が...

を私の解決策を得ました。私はベータ版を使用していますv0.98.0。 "-100px"へ移動X: "100pxに"

ので、主にshowStaggeredList機能を編集:

Materialize.showStaggeredList = function(selectorOrEl) { 
    var element; 
    if (typeof(selectorOrEl) === 'string') { 
     element = $(selectorOrEl); 
    } else if (typeof(selectorOrEl) === 'object') { 
     element = selectorOrEl; 
    } else { 
     return; 
    } 
    var time = 0; 
    element.find('li').velocity(
     { translateX: "100px"}, 
     { duration: 0 }); 

    element.find('li').each(function() { 
     $(this).velocity(
     { opacity: "1", translateX: "0"}, 
     { duration: 800, delay: time, easing: [60, 10] }); 
     time += 120; 
    }); 
    }; 
鉱山 materialize.jsライン変更 移動Xで

関連する問題