jQuery的画廊淡入/淡出

我建立基于以下标记一个简单的图片库：jQuery的画廊淡入/淡出

<div id="image-list"> 
<ul> 
<li id="image-1"> 
<img src="myimage1.jpg" width="500" height="500" alt="My Image" /> 
</li> 
<li id="image-2"> 
<img src="myimage2.jpg" width="500" height="500" alt="My Image" /> 
</li> 
<li id="image-3"> 
<img src="myimage3.jpg" width="500" height="500" alt="My Image" /> 
</li> 
</ul> 
</div> 
<ul id="thumb-list"> 
<li id="thumb-1"><img src="myimage1-thumb.jpg" width="50" height="50" alt="My Image" /></li> 
<li id="thumb-2"><img src="myimage2-thumb.jpg" width="50" height="50" alt="My Image" /></li> 
<li id="thumb-3"><img src="myimage3-thumb.jpg" width="50" height="50" alt="My Image" /></li> 
</ul>

我都称呼这个使用CSS，这样只有较大的图像，一个在同一时间是可见的（使用溢出：用固定的容器高度隐藏）。

然后我使用jQuery的容器内的绝对定位UL，以显示每个图像，使用下面的标记：

$('#thumb-list li img').click(function() { 
    var image = $(this).parent().attr('id').substring(6); 
    var position = $('#image-' + image).position(); 
    $("#image-list ul").css({'top' : '-' + position.top +'px'}); 
});

基本上我想淡出了整个“＃图像列表UL”，而它的位置会发生变化，然后将其淡入以显示新图像。

有人可以建议最有效的方法来做到这一点？ - 任何帮助深表感谢！

来源

2010-01-10 Fred

jQuery的fadeOut（）和fadeIn（）不适合你？ – 2010-01-10 12:25:18

是的，我更不确定如何让他们获得理想的效果。我猜我需要在fadeOut回调函数中的大部分代码？ – Fred 2010-01-10 12:41:57

此代码是最佳解决方案吗？： $（'＃thumb-list li img'）。click（function（）{ \t var image = $（this）.parent（）。attr（'id'）（'＃image-list ul'）。fadeOut（'fast'，function（）{ \t \t $（本）的.css（{ '顶'： ' - ' + position.top + '像素'}）淡入（ '快'）; \t}）; \t \t \t \t \t }）; – Fred 2010-01-10 12:50:58

从你的img标签中删除高度和宽度，css可以照顾到这一点。

CSS

＃图像列表{

 position:relative; 
     height:500px; 
     width:500px;

}

＃图像列表IMG {

 height:500px; 
     width:500px;

}

＃图像列表里{

 position:absolute; 
     top:0; 
     right:0;

}

$（ '＃拇指列表里IMG'）。点击（函数（）{
 var image = $(this).parent().attr('id').substring(6); 
     $('#image-' + image).fadeIn("slow").siblings().fadeOut("slow"); 
}）;

你使用的是原型还是jQuery？

如果您使用jquery，而不是依靠.css()函数尝试.hide()函数，因为它的功能与css({'display' : 'none'})完全相同。和.fadeIn()将动画你的div的回报。在第一次加载时，它们全都可见，所以不要用css来告诉jquery用这个命令隐藏它们。

$（'＃thumb-list il'）。hide（）;

来源

2010-01-10 13:03:39

我建议不要在您的html中删除宽度和高度：通过设置这些，即使在加载图像之前，您的html也能正确呈现。 – 2010-01-10 13:17:16

嗯，我总是被告知保留我的HTML标签的样式标记，但... – 2010-01-10 13:57:41

感谢罗伯特，重叠列表项目绝对看起来像一个更好的解决方案...大概这种方法，我需要添加“显示：没有;”然后显示第一项使用类似： $（'＃image-list ul li：first-child'）。css（{'display'：'block'}）; （对不支持“first-child”的浏览器使用javascript）。 – Fred 2010-01-10 18:04:32

另一种解决方案可能是使用插件，然后修改您的样式，以便在某人禁用Javascript时不会破坏您的页面。

退房：http://medienfreunde.com/lab/innerfade/

这是很容易使用，而难以弄乱。祝你好运！ :)

来源

2010-01-10 21:06:01 saibot

jQuery的画廊淡入/淡出

回答

相关问题