jquery - 展开 LI 项目并对其余项目重新排序

Question

我正在尝试在 jQuery 中实现以下效果:

描述。

我有一个 LI 列表，每个列表都有缩略图。当我单击缩略图时，我会对该 LI 的宽度进行动画处理以包含大图像(例如从 300px 到 972px；类似于 jQuery Popeye 插件效果)。

每个 LI 都有一个 300px 的固定宽度，并通过 jQuery 中的 nth-child 附加一个“nomarginright”(一行中的第三个项目必须具有该类)。

问题。

如果我单击连续的第一个 LI，它将展开而不会超出其容器。但是，如果我单击第二个，它会扩展到其容器之外，并将第一个 LI 留在第一行，而第三个 LI 位于另一行，并附加“nomarginright”类(因此第三个和第四个之间没有空格)。

1. 如何在单击缩略图后连续展开 LI 并对非事件 LI 项目重新排序(同时重置“nomarginright”效果)？

理想的解决方案是:在该行中，将事件 LI 移到任何非事件 LI 之前，并重置 nomarginright。

    $('#portfolio ul li div.picture a').each(function() {

    $(this).click(function() {
        $(this).parent().animate({
            width: 972,
            height: 504
        }, 2000);

        $(this).parents('li').addClass('active').animate({
            width: 972
        }, 2000);

        return false;
    });

HTML:

<li>
<div class="picture">
<a href="includes/pictures/portfolio-client-2.png" title="#"><img src="includes/pictures/portfolio-client-1.png" alt="#" /></a>
</div><!-- end .picture -->
</li>

上面的内容只是在 UL 中重复。

Answer 1

我从你的描述中得出了一些结论:http://jsfiddle.net/UMZhu/15/ .

请告诉我! ;)

PS:刚刚注意到缩略图堆积起来，由于我的分辨率，我忽略了一个错误。使用 CSS 应该可以提供所需的解决方案。

PPS:修复了 CSS 布局问题。它可以进一步简化一点，但这应该可以帮助您入门。希望我没有在这里叫错树。