そしてもう一つのRazorjack Quicksand for jQuery Jumpy Transition - jsfiddleが提供されました

quicksandでフィルタリングすると、すべての画像が滑ってから位置に移動します。私はたくさんのq &をここで読んだが、私はこのジャンプを取り除くことができなかった。提供される例/ jsfiddleでそしてもう一つのRazorjack Quicksand for jQuery Jumpy Transition - jsfiddleが提供されました

、エラーは、これらのステップバイステップにより再生可能である：と2枚の画像が含まれるようにウィンドウのサイズを調整

。出力には、2x2画像のグリッドが表示されます。
すべてをフィルタリングするには「すべて」を押してください（すべて表示されていますが）。
「ハード」を押してハードにします。画像はすばやく「跳ね上がって」位置にスライドされます。

jsfiddleは、ここに提供されています：https://jsfiddle.net/2kgu8c80/19/

外部ライブラリ：

jQueryの3.0
https://cdn.jsdelivr.net/quicksand/1.4/jquery.quicksand.js

HTML：

<head> 
    <title>My Wooden Puzzles</title> 
    <script src="https://code.jquery.com/jquery-3.0.0.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script> 
    <script type="text/javascript" src="quicksand/quicksand.min.js">/script> 
</head> 
<body> 
    <ul id="pzl_filter"> 
    <li id="filter_hard"><a href="javascript:filter('all');">All</a></li> 
    <li id="filter_hard"><a href="javascript:filter('hard');">Hard</a></li> 
    <li id="filter_easy"><a href="javascript:filter('easy');">Easy</a></li> 
    </ul> 
    <div id="outer-wrapper"> 
      <ul id="pzl_thumbs" class="pzl_thumbs"> 

     <li id="pzl_main_chess_snake" data-id="chess_snake" class="pzl_d_hard"> 
      <img src="http://www.mywoodenpuzzles.com/data/chess_snake/main_thumb.jpg" class="img_thumbs"> 
     <dl><br><dd>Chass Snake</dd></dl></li> 

     <li id="pzl_main_triforce_2" data-id="triforce_2" class="pzl_d_easy"><a href="javascript:select_puzzle('triforce_2', 'pieces');"><img src="http://www.mywoodenpuzzles.com/data/triforce_2/main_thumb.jpg" class="img_thumbs"> 
     <dl><br><dd>Triforce 2</dd></dl></a></li> 

     <li id="pzl_main_three_pieces_cross" data-id="three_pieces_cross" class="pzl_d_hard"> 
     <img src="http://www.mywoodenpuzzles.com/data/three_pieces_cross/main_thumb.jpg" class="img_thumbs"> 
     <dl><br><dd>3 pieces cross</dd></dl></li> 

     <li id="pzl_main_centrifuge" data-id="centrifuge" class="pzl_d_easy"> 
     <img src="http://www.mywoodenpuzzles.com/data/centrifuge/main_thumb.jpg" class="img_thumbs"> 
     <dl><br><dd>Centrifuge</dd></dl></li> 
    </ul> 
     </div> 
</body>

CSS

/* Layout & items */ 

#outer-wrapper { 
    margin: 5px 20px; 
} 

.pzl_thumbs li, 
.img_thumbs { 
    background-color: transparent; 
    display: block; 
    max-height: 100%; 
} 

.img_thumbs { 
    height: 192px; 
} 

.pzl_thumbs li { 
    float: left; 
    height: 215px; 
    margin: 10px 10px 30px 10px; 
} 

.pzl_thumbs ul { 
    float: left; 
} 

.pzl_thumbs dd { 
    color: #666666; 
    font-size: 14px; 
    text-align: center; 
}

はJavaScript

var $list = jQuery("#pzl_thumbs"); 
var $data = $list.clone(); 
var $filteredData = null; 

function filter(difficulty) { 

    var sel = ((difficulty!='all')? 'li.pzl_d_' + difficulty : 'li') ; 

    $filteredData = $data.find(sel); 
    $list.quicksand($filteredData, { 
     duration: 1800, 
     adjustHeight: false, 
     }); 
}

出典

2017-01-05 Andreas Lundgren

問題は.pzl_thumbs liのmax-height: 100%;です。これを削除し、内容に応じてli要素のサイズを自由に変更する必要があります。あなたは.img_thumbsためmax-height: 100%;が必要な場合は、

.pzl_thumbs li, 
.img_thumbs { 
    background-color: transparent; 
    display: block; 
}

代わりにそこにそれを移動：

.pzl_thumbs li, 
.img_thumbs { 
    background-color: transparent; 
    display: block; 
    max-height: 100%; 
}

この目的のために：

したがって、これを修正する

.img_thumbs { 
    height: 192px; 
    max-height: 100%; 
}

がhttps://jsfiddle.net/2kgu8c80/22/を参照してください。

出典

2017-01-15 02:13:17 Rei

ありがとうございます！完璧な答えを私は喜んで賞品です！ StackOverflowがあなたに賞金を授与されるまでにもう8時間を渡さなければならないと私に伝えました。 –

@AndreasLundgrenよろしくお願いします。私は助けて、恩恵のために事前に感謝しています。 – Rei

そしてもう一つのRazorjack Quicksand for jQuery Jumpy Transition - jsfiddleが提供されました

答えて

関連する問題