Question

我只是想知道如何使用这种良好的效果来完成这种类型的网格组合。选项卡更改时触发的效果。

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

谢谢！

Answer 1

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

使用jquery的网格组合？

2 个答案: