中心淡入圖像

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

來源

2010-08-24 ChrisOPeterson

好吧，那是令人驚訝的。爲了解決這個問題，我嘗試使用fadeTo，其中顯示問題是一旦可見的圖像被給予display: inline;，所以只需要解決這個問題。

.gallery { text-align: center; }

我以爲jQuery只是改變不透明度，但它似乎也改變了顯示。棘手。

來源

2010-08-24 20:48:34 ChrisOPeterson

你加入margin: 0 auto;只對.visible類，你需要的是適用於所有的圖片：

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

來源

2010-08-24 07:05:19 David

那麼.visible類是唯一需要居中且可見的類，因此區別不應有所作爲。雖然我嘗試了這種方法，但沒有任何改變。 jQuery fadeIn方法正在改變別的東西。 – ChrisOPeterson 2010-08-24 20:30:37

中心淡入圖像

回答

相關問題