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();
});

Answer 2

如果这是家庭作业，请附加作业标签。

我无法为您提供完整的HTML和JavaScript，但这是一个想法。你有两个街区。漂浮在正确的街区;

Left Block - 60%.
Right Block - 20% (float:right)

定义Right＆amp;的高度左侧阻止并为右侧阻止overflow:hidden。现在定义一个这样的单击函数。

var nextAnimateImageId = 1;
$("#my_button").click(function{

jQuery("#my_image"+animateImageId).animate({height:'toggle'});
nextAnimateImageId  = nextAnimateImageId + 1;

});

我的想法是，如果你有5张图片，只会显示3张因为定义的高度和溢出：隐藏属性。当您将第一个图像设置为高度= 0（这是切换的动画）时，第四个图像将由于释放空间而出现，为您提供一个很好的向上滚动动画。

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

2 个答案: