中心淡入图像

时间:2010-08-24 06:29:03

标签: javascript jquery css

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

2 个答案:

答案 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只是改变了不透明度,但它似乎也改变了显示效果。棘手。