1

いくつかのカテゴリリンクでポートフォリオの親指をフィルタリングしたいと思います。流砂はバグが多すぎるので、自分でコードを書いてみたいと思います。私はjQueryにかなり慣れていないので、問題が発生し、おそらく過剰なコードが発生することはわかっていました。:)

私は先に進み、問題を示すjsFiddleを作成しました。

http://jsfiddle.net/zHWgG/1/

ちらつきがわかりますか？望ましい効果は、フィルターをクリックして、すべての表示が完全にフェードアウトし、対応する親指だけがフェードインすることです。これは機能し、有効なjQueryですが、どうすればよいですか。

  1. ちらつき効果を取り除く

  2. よりスリムなコード（より少ないバイト）を単純化/作成する

ありがとう！

4

3 に答える 3

3

アニメーション終了コールバックを使用します。

$('.item').fadeOut(500, function() {
     $('.item').fadeIn(500);
});

編集： ちらつきは、非表示の.portfolio-itensがフェードアウトしているために発生します。これらは、エフェクトのアクティブ化時に表示されるようになります。これを使用してみてください：

$('.portfolio-item:visible').fadeOut(500, function() {
     $('.item').fadeIn(500);
});

疑似セレクター:visibleは、目的の要素に対してのみフェードアウトをアクティブにします。

于 2012-10-01T04:10:46.510 に答える
1

コードを減らすためにこれを試してください：

    $('.menu_item').click(function(){
    var callBack = (function(itemsToShow){
        $('.portfolio-item:visible').fadeOut(500, function() {
            $(itemsToShow).fadeIn(500);
        });
    });

    switch ($(this).attr('id')){
        case 'all':
            callBack('.portfolio-item');
            break;
        case 'web':
            callBack('.web');
            break;
        case 'graphic':
            callBack('.graphic');
            break;
        case 'logo':
            callBack('.logo');
            break;
        case 'motion':
            callBack('.motion');
            break;

    }                
});

上記からわかるようにmenu_item、ナビゲーションリストにクラスを追加しました

http://jsfiddle.net/zHWgG/18/

于 2012-10-01T05:31:49.387 に答える
1

ちらつきを止めるには.stop()、コードに追加する必要があります-> http://api.jquery.com/stop/

http://jsfiddle.net/rrikesh/dS5zV/

$('#all').click(function() {
        //fade out entire set (transition looks better)
        $('.portfolio-item').stop(true,true).fadeOut(500);
            //fadeIn all thumbs
            $('.portfolio-item').fadeIn(500);
        });
});
于 2012-10-01T04:45:01.003 に答える