3

私は、hrefリンクの代わりに選択フォームとオプションフォームを使用して流砂を機能させる方法を何年もかけて考えてきました。アニメーションが途切れ途切れになっているため、問題が発生しました。なめらかにできません。それは大丈夫から始まり、次に左にスナップバックします。あなたはオンラインの例を見ることができます：

http://freecss.info/ScreencastTutorials/archive.html

何か案は？私は多くのことを考えて実験しましたが、運がありませんでした。他のスクリプトは互換性があり、固定幅に変更して、overflow：hiddenでホルダーdivを追加しようとしました。

関連するjquery：

var $holder = $('ul#archive-full');
var $data = $holder.clone();
var mySelect = $('#mySelect');
mySelect.change(function() {
    var index = mySelect[0].selectedIndex;
    var element = mySelect[0].options[index];
    var $filterType = $(element).attr('value')
    if ($filterType == 'all') {
        var $filteredData = $data.find('li:not(li ul li)');
    }
    else {
        var $filteredData = $data.find('li[data-type~="' + $filterType + '"]');
    }
    $holder.quicksand($filteredData, {
        duration: 800,
        easing: 'easeInOutQuad'
    });
    return false;
});

関連するHTML

<select name="mySelect" id="mySelect" selected value="all">
 <option name="all" value="all">Free & Premium</option>
 <option name="free" value="free">Free Only</option>
 <option name="premium" value="premium">Premium Only</option>
</select>
<ul id="archive-full">
 <li data-id="id-1" data-type="all premium">/li>
</ul>
4

1 に答える 1

4

マイケルの場合：

問題は、同じIDを使用して順序付けされていないリストのスタイルを設定し、jQueryを使用して順序付けされていないリストをアニメーション化することでした。

これを解決するには、順序付けされていないリストにクラスを追加し、これを使用してCSSを使用してスタイルを設定します。次に、元のIDを使用してjQueryアニメーションを実行します。例：

<ul id="archive-full" class="archive-style">
于 2011-06-19T20:55:22.793 に答える