我正在使用jquery构建一个简单的图库,但遇到了烦人的问题。由于图像具有各种尺寸,因此我将它们都集中在一起以使其看起来更均匀。然而内置的fadeIn / fadeOut方法抛出这个中心错误,我不完全确定发生了什么。我尝试再次手动添加居中类,然后手动添加css,但是一旦变为可见,就无法将图像置于中心位置。想法?
css -
.center { margin: 0 auto; }
img.invisible { display: none; }
img.visible { margin: 0 auto; display: block;}
标记 -
<div id="content" class="center gallery">
<img src="images/event/event_1.jpg" alt="alt-text" class="visible" />
<img src="images/event/event_2.jpg" alt="alt-text" class="invisible" />
<img src="images/event/event_3.jpg" alt="alt-text" class="invisible" />
<div id="selection" class="overlay">
<div class="select first">
<a href="#" rel="1"><img src="images/event/event_1_small.jpg" /></a>
</div>
<div class="select">
<a href="#" rel="2"><img src="images/event/event_2_small.jpg" /></a>
</div>
<div class="select">
<a href="#" rel="3"><img src="images/event/event_3_small.jpg" /></a>
</div>
</div>
jQuery -
function updateImage(img_num) {
var cur_img = $("#content img.visible");
var next_img = $('#content img[src^="' + img_path + img_num + '.jpg"]');
cur_img.fadeOut('600',function() {
next_img.fadeIn('600');
next_img.removeClass("invisible").addClass("visible");
cur_img.removeClass("visible").addClass("invisible");
});
}
答案 0 :(得分:0)
您只是将margin: 0 auto;
添加到.visible
课程,您需要将其应用于所有图片:
.gallery img{margin:0 auto;display:none}
.gallery img.visible{display:block}
答案 1 :(得分:0)
好的,这是令人惊讶的。为了解决这个问题,我尝试使用fadeTo,结果显示问题是一旦显示的图像被赋予display: inline;
所以解决这个问题所需要的只是。
.gallery { text-align: center; }
我认为jQuery只是改变了不透明度,但它似乎也改变了显示效果。棘手。