状態に応じて画像をフェードアウトして並べ替えます

Question

this websiteで、バッジセクションまでスクロールすると、「ロックされた」ロックされたバッジがあります。

問題：

1. 私は、ロックされたバッジが衰退することができます。 （ホバー効果のように、色あせた画像が表示されます）

2. ロックされていないバッジを最後に最初に表示し、ロックされたバッジにすることはできますか？

ロックとアンロックセクションに関連するCSSやJS：サイト全体の

$.each($('.Portfolio-box'), function() { 
 
    var count = $(this).children('.has-badge').attr('data-count'); 
 
    if (count > 0) { 
 
    $(this).children('ul.locked').hide(); 
 
    $(this).children('ul.unlocked').show(); 
 
    } else { 
 
    $(this).children('ul.locked').show(); 
 
    $(this).children('ul.unlocked').hide(); 
 
    } 
 
});

.unlocked li:before { 
 
    content: '\2713'; 
 
    display: inline-block; 
 
    color: green; 
 
    margin-left: -65px; 
 
    padding: 0 9px 0 0; 
 
} 
 
.unlocked li { 
 
    list-style-type: none; 
 
    font-size: 1.5em; 
 
    margin: 1px; 
 
    font-weight: bold; 
 
} 
 
.locked li:before { 
 
    content: '\274c'; 
 
    display: inline-block; 
 
    color: red; 
 
    margin-left: -65px; 
 
    padding: 0 9px 0 0; 
 
} 
 
.locked li { 
 
    list-style-type: none; 
 
    font-size: 1.5em; 
 
    margin: 1px; 
 
    font-weight: bold; 
 
}

フィドルリンク：https://jsfiddle.net/dkjz1z4k/1/

Answer 1

1.Can私が作りますロックされたバッジは退色した。ホバー効果のように、色あせた画像が表示されます）

現在のステータスクラスを要素のコンテナに追加することをお勧めします。

.locked-badge img { 
 
    opacity: 0.7; 
 
} 
 

 
.locked-badge .badge-img { 
 
    opacity: 0.7;  
 
}

<div class="Portfolio-box locked-badge"> 
 
    <img src="#" class="badge-img"> 
 
</div>

それはCSSに設計されたすべての要素の魔女にクラスを与えるために、常に良いでしょう：あなたのケースでは、このようなものである可能性があります。それはあなたの将来の多くの時間を節約し、いくつかの問題を防ぐ。

2.ロックされていないバッジが最初に表示され、最後にロックされたバッジが表示されるようにすることができます。

Sort JavaScript object by keyを確認してください。もう1つの方法はlodash orderBy methodです。