jquery图库淡入/淡出

Question

我正在基于以下标记构建一个简单的图片库：

<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设置了样式，这样一次只能看到一个较大的图像(使用overflow:使用固定的容器高度隐藏)。

然后我使用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'});
});

基本上，我希望在"# image -list ul“的位置改变时淡出整个”#image-list ul“，然后淡入以显示新图像。

谁能建议最有效的方法来做这件事？-任何帮助都是非常感谢的！

Answer 1

删除您的img标签的高度和宽度，css可以处理这一点。

CSS

#镜像列表{

位置:相对；高度:500px；宽度:500px；

}

#image-list img{

高:500px；宽:500px；

}

#image-list li{

位置:绝对；顶部:0；右侧:0；

}

JS

函数$('#thumb-list li img‘).click(

(){

var image = $(this).parent().attr('id').substring(6)；$('#image-‘+var

})；

你使用的是prototype还是jquery？

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

$('#thumb-list il').hide();

Answer 2

另一种解决方案可能是使用插件，然后修改您的样式，这样如果有人禁用了Javascript，您的页面看起来不会损坏。

查看：http://medienfreunde.com/lab/innerfade/

它很容易使用，也很难搞砸。祝你好运！:)