javascript - 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: hidden 并具有固定的容器高度)。

然后我使用 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”，然后淡入以显示新图像。

有人可以建议最有效的方法吗？ - 非常感谢任何帮助!

Answer 1

从您的 img 标签中删除高度和宽度，css 可以处理。

CSS

#image-list{

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

}

#image-list img{

      height:500px;
      width:500px;

}

#image-list li{

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

}

JS

$('#thumb-list li img').click(function() {

      var image = $(this).parent().attr('id').substring(6);
      $('#image-' + image).fadeIn("slow").siblings().fadeOut("slow");

});

您使用的是原型(prototype)还是 jquery？

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

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