javascript - 带有滑动图片的动态 jQuery 菜单

Question

我需要制作一个动态的 jQuery 菜单来展示产品。

将有一张带有文本和超链接的主图片，占据屏幕的 60%，在它的右侧我需要三张小图片(一张在另一张上方，水平)，屏幕宽度为 20%(但是全部与主高度相同)。

我需要动画方面的帮助。接下来是动画:右边的三张图片向上滑动，最上面的消失了，下面又追加了一张新的(同时最上面的消失了)。现在，消失的成为主要的。

我用 .slideUp 函数做了一个简单的解决方案，但这实际上并没有使 div 上升，相反它只是失去它的高度直到它变得不可见。这不是我想要的解决方案。

谢谢。

编辑:

我已经设法用 jQuery.sliedUp 函数得到了一些解决方案，但我仍然没有得到客户要求的效果。

现在通过更多搜索，我发现 jQuery UI 隐藏功能扩展可以实现我正在寻找的效果。

这是一个例子:http://jsfiddle.net/WMPRJ/

我现在的问题是，如果您单击顶部的 div，当它向上滑动时，底部的 div 不会跟着它向上滑动并取而代之。我需要那样做。请提供解决方案。

Answer 1

将当前的主要内容附加到缩略图的底部，向上滑动顶部的内容并remove()。获取其 src 属性并将其设置为主图像。

这里有一些(抱歉，不是一个独立的示例)代码，可以让您到达目的地。如果您真的花时间阅读它，您会发现它完全符合我在前两句话中描述的内容。

$('.thumb').first().slideUp(function(){
  $('#main').attr('src', $(this).attr('src'));
  $(this).remove();
});