简单的动画内容替换？

Question

我需要一些关于最佳方式的建议，以推进稳定的插件/解决方案。

基本上：

1. 我有2排，每3幅图像，总共6个的图像。
2. 每个图片都是一个产品。
3. 点击链接将更改内容向您展示关于该产品的更多信息。

下图显示了之前和之后，我试图做到：

1. 当点击6个图像之一，内容区域应该改变这样的布局是不同的。
2. 新的布局是：A.顶部的放大内容区域。 B.底部有5张缩略图。

现在我不需要任何幻想什么，我想最终做的是：

1. 显示在页面加载“之前”的状态。一旦点击了其中一个图像，我们就不需要回到这个状态。

2. 一些如何从“之前”状态过渡到“之后”状态。我认为这可能很简单，就像两个状态在一个div中一个被隐藏，并且只有“after”状态向上滚动或反弹，以便覆盖“之前”状态或将其推出内容区域它现在隐藏了。

   • 类似的东西来： http://webdeveloperpost.com/Articles/Create-your-own-sliding-divs-with-jQuery.aspx

3. 一旦在“后”状态，点击产品图片可以只淡入/淡出内容在它的顶部区域。

4. 尽管所显示的产品不应该出现在底部，因此为什么它只显示5张图片而不是6张......我可以肯定地使用底部的所有6个以使事情更容易。

---

注：

答：我一直在寻找这两个教程，但它们实际上改变所有的页面内容。这不适合我，因为我有内容的东西在示例图像显示的左，我不希望这有进出褪色/负载： - http://css-tricks.com/dynamic-page-replacing-content/ - http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/comment-page-1/#comments

乙。关于它的思考，也许要保持一致性，也许这将是最好的：

• 幻灯片从下往上“后”状态，力推“前”状态的出路。
• 一旦进入“之后”状态，只需点击一下产品图像即可将产品信息从左向右滑动。
• 所以底部只显示5个产品图片，隐藏当前可查看产品的div。不过，我想这可能是更容易只是一直显示所有6

我不知道如何实现上述会影响搜索引擎优化，但我知道没有其他办法，我能做到什么，我在躲一边做莫名其妙地使用jquery。

Answer 1

这不难做出。我建议您将图像作为包含每个图像上的数据的对象的数组。然后，在页面加载时，为每个图像创建一个“图块”并将它们放在一个框中。处理点击瓷砖并随意移动它们，甚至可以为产品信息创建一个div。

我很无聊，所以我使用了一个小例子对你的jQuery：Example on JSFiddle

---

注：我只测试了上面的链接在Chrome所以有可能是在Firefox上的不一致，歌剧等。