Question

我正在尝试在jQuery中产生以下效果：

描述

我有一个LI列表，每个都有缩略图。当我点击缩略图时，我正在设置LI的宽度以包含一个大图像（例如从300px到972px;类似于jQuery Popeye插件效果）。

每个LI的固定宽度为300px，并且在jQuery中通过nth-child追加“nomarginright”（连续的第3项必须具有该类）。

问题。

如果我连续点击第一个LI，它会扩展而不会超出其容器。但是如果我点击第二个，它会扩展到它的容器之外，它将第一个LI留在第一行，而第三个是另一个连接了“nomarginright”类的行（因此在第三行和第四行之间没有空格）。 / p>

如何点击缩略图（重新设置“nomarginright”效果）后，如何连续展开LI并重新排序非活动LI项目？

所需的解决方案是：在该行中，在任何非活动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布局问题。它可以简化一点，但这应该让你开始。希望我不会在这里咆哮错误的树。

Answer 2

编辑我通过绝对定位a标记，提升了我自己的解决方案;不需要克隆。要做到这一点，您只需在li上设置宽度，然后就可以在其边界外调整a。

Here's the new, uber-ultra-deluxe fiddle

旧方法

通过简单克隆a标记并将其附加到具有绝对定位的li，我实现了我认为您想要的结果。然后我为该克隆设置动画;）

Check it out in this fiddle

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

2 个答案: