0

jquery でミニソート プラグインの作成に取り組んでいます。

クリック イベントで CSS アニメーションをトリガーするオプションが必要ですが、display: none;.

クラスを作成してそのクラスを要素に適用しようとしましたが、うまくいきません。

    $('.legend li').on('click',function(){

        var thisClass = $(this).attr('class');

        $('div').not('.'+thisClass).removeClass('active');
        $('div.'+thisClass).addClass('active');
   });

私が望んでいないのと同じ機能を持つプラグインを見つけましたが、より小さなものを構築したいと思っており、プラグインに頼る前に常に学習経験として自分自身を試したいと思っています. 彼らがアニメーションをどのように実行するかについて、私は少し混乱しています。インライン css のように見えますが、インライン トランジションを追加しようとしても効果がありませんでした。style タグでトランジションを確認できましたが。

編集

ここにフィドルがあります。 http://jsfiddle.net/NktDU/1/

4

2 に答える 2

1

代わりにjQueryのhideandを使用できますshow

更新されたデモ

$('#grid div').not('.'+thisClass).hide("fast").removeClass('active');
$('#grid div.'+thisClass).show("fast").addClass('active');

display:noneCSSから削除します

または、次のように、CSS トランジションを使用して幅を切り替えるだけで実行できます。

#grid div {
    display: block;
    height: 20px;
    width: 0px;
    margin:0px;
    float: left;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    transition: all 1s ease;  
    background: black;
}
#grid .active {
    width:20px;
    margin: 2px;
}

そのためのデモ

于 2013-09-25T22:25:08.290 に答える
0

このようなもののために書かなければならないライブラリは計り知れないと思います。この場合、実装に取り​​組むことを強くお勧めしますIsotope by David DeSandro。

これはあなたが話していたプラグインですか？独自のソリューションを考え出す一方で、アイソトープを独自のものにすることもできます。私はそれを数回実装しました。多くのことを学ぶと同時に、jQuery/JS/CSS (およびメディア クエリ) がどのように連携するかを学びます。

クリックして並べ替えを実装し、キーワード検索による独自の並べ替えも作成しました。必要に応じて、いくつかのフィドルをまとめることができます...

編集： あなたが見つけたプラグインへのリンクを見ました...実際にはアイソトープのフレームワークを使用しており、特定の状況でアイソトープを使用することをお勧めします。

幸運を！

于 2013-09-25T22:17:01.703 に答える