Question

我正在使用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");
    });
}

Answer 1

您只是将margin: 0 auto;添加到.visible课程，您需要将其应用于所有图片：

.gallery img{margin:0 auto;display:none}
.gallery img.visible{display:block}

Answer 2

好的，这是令人惊讶的。为了解决这个问题，我尝试使用fadeTo，结果显示问题是一旦显示的图像被赋予display: inline;所以解决这个问题所需要的只是。

.gallery { text-align: center; }

我认为jQuery只是改变了不透明度，但它似乎也改变了显示效果。棘手。

中心淡入图像

2 个答案: