jQuery網格組合？

Question

我只是想知道如何做這種類型的網格投資組合，這個很好的效果。 選項卡更改時觸發的效果。

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

謝謝！

Answer 1

添加覆蓋div將覆蓋您的圖像（不透明度）。現在在jquery中註冊一個關於懸停事件的事件，將會將高度設置爲100％（重新設置爲0）。

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

當然捕捉動畫正在進行（停止當前），以便它不會循環，當你快速懸停幾次。

Answer 2

我沒有測試過這一點，但以下似乎是從你的榜樣網站相關的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");                 
    }); 
}