向下滑动类似于谷歌图像的结果

Question

我正在尝试做一些类似于谷歌在他们的图像搜索结果中使用的滑动功能。

我有一些东西在这个jsFiddle中工作:

http://jsfiddle.net/ultraloveninja/X7rmK/

使用jQuery:

$(document).ready(function () {
    $('.slider').click(function (e) {
        e.preventDefault();
        $('.internal').slideUp('normal');
        if ($(this).next().is(':hidden') === true) {
            $(this).addClass('on');
            $(this).next().slideDown('normal');
        }
    });
    $('.internal').hide();
});

但是我不确定如何得到它，所以属于图像的内容在它的下面。

我找到了这个链接:http://tympanus.net/codrops/2013/03/19/thumbnail-grid-with-expanding-preview/

但是当它与同位素结合时会引起一些问题。所以，我试着自己做一个，看看我是否能实现类似的东西，当用同位素过滤时也能起作用。

不太确定我是否需要在CSS中设置不同的东西，或者我是否需要让JS命令不同。

Answer 1

为什么不把你的内容放在滑块里，放在图片后面呢?它们是一起的，所以把它们分组是有意义的。这也将使您的问题(和js)容易得多。看看这个:
http://jsfiddle.net/Pevara/X7rmK/2/

html现在看起来像这样:

<div class="slider">
    <img src="..." />
    <div class="internal">Content here</div>
</div>

js变得更短了:

$('.slider').click(function () {
    $(this).find('.internal').slideToggle();
});