jquery - jqueryを使用したグリッドポートフォリオ?

Question

この素晴らしい効果で、このタイプのグリッドポートフォリオをどのように行うことができるのだろうか. タブが変更されたときにトリガーされるエフェクト。

http://adammunns.com/grid-portfolio/

ありがとう！

Answer 1

私はこれをテストしていませんが、以下はあなたのサンプルサイトからの関連するjQueryのようです：

// filter items when filter link is clicked
var selectors = [];

$j('#filters a').click(function(e){
    e.preventDefault();

    var selector = $j(this).attr('data-filter');

    $j('#filters li').removeClass('active');
    $j(this).parent().addClass('active');
    $container.isotope({ filter: selector });
});

var box = $j('.pboxgraphic');
var hover = 'span.hover,span.hover_solid,.pboxtext';

if( $j('#projects').hasClass('fade') ) {
    box.mouseenter(function(el) {
        $j(this).find(hover).stop().fadeIn("fast");                             
    });

    box.mouseleave(function(el) {
        $j(this).find(hover).stop().fadeOut("fast");                                                                
    });
} else {
    box.mouseenter(function(el) {
        $j(this).find(hover).stop().slideToggle("fast");                                
    });

    box.mouseleave(function(el) {
        $j(this).find(hover).stop().slideToggle("fast");                                                                
    });
}

Answer 2

画像を（不透明度で）カバーするオーバーレイdivを追加します。次に、jqueryにon hoverイベントを登録します。これにより、on overは高さを100％にアニメーション化します（on outは0に戻ります）。

img.hover(function() {
  overlay.animate('height', '100%');
}, function() {
  overlay.animate('height', 0);
});

もちろん、進行中のアニメーションをキャッチして（電流を停止）、すばやく数回ホバリングしたときにループしないようにします。