jquery - 使用 jquery 的网格组合？

Question

我只是想知道我怎样才能做这种类型的网格组合，效果很好。选项卡更改时触发的效果。

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

谢谢！

Answer 1

添加一个覆盖您的图像的覆盖 div（不透明度）。现在在 jquery 中注册一个 on hover 事件，on over 将动画高度设置为 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");                                                                
    });
}