jQuery循環：在一個li內垂直對齊一個圖像

Question

我基本上是使用jQuery循環的橫幅圖像，其中我有圖像是一個大小的數組。我試圖讓圖像垂直對齊LI的高度。現在我已經有了一些粗略的工作，但方式不好。

你可以在這裏查看我的工作方式：

http://jsfiddle.net/X4GQC/

我的HTML：

<div id="slider"> 
    <ul class="slidah"> 
     <li><img src="img/slide1.jpg" alt=""></li> 
     <li><img src="img/slide1.jpg" alt=""></li> 
     <li><img src="img/slide1.jpg" alt=""></li> 
     <li><img src="img/slide1.jpg" alt=""></li> 
    </ul> 
</div> 

我的jQuery：

(function ($) { 
    $.fn.vAlign = function(fn) { 

     return this.each(

      function(i){ 

       var ah = $(this).height(); 
       var ph = $(this).parent().height(); 
       var mh = Math.ceil((ph-ah)/2); 
       $(this).css('margin-top', mh); 
      }); 
    }; 
})(jQuery); 

$('.slidah').cycle({ 
    after: function(){ 
     $(".slidah li img").vAlign(); 
    } 
}); 

我的CSS：

#slider{ 
    width: 100%; 
    height: 200px; 
    overflow: hidden; 
} 

.slidah{ 
    width: 100%; 
    height: 200px; 
} 

.slidah li{ 
    width: 100%; 
    height: 200px; 
} 

現在你可以看到，垂直對齊功能的工作，但它觸發週期發生後。我試過before但是這沒有奏效。我需要一種方法在發生循環的同時重新啓動事件？

Answer 1

我相信因爲jquery .cycle（）在做什麼，你總是會得到不可靠的結果來攻擊這個問題。我的第一個想法是對jQuery文檔中的所有列表項進行計算，並在DOM加載後立即設置每個頁邊距。因此試圖用初始CSS來解決這個問題，而不是依靠在/之前/或作爲每個jquery .cycle調用的回調調用一個函數。

這種方法應該會產生更穩定的結果。不好意思看我能不能在少數人身上弄出一把小提琴。

編輯：這裏是你修改的jquery working for me in a fiddle here，沒有小故障的功能或其他問題，如你提供的例子。享受

(function ($) { 
    $.fn.vAlign = function(fn) { 

     return this.each(

      function(i){ 

       var ah = $(this).height(); 
       var ph = $(this).parent().height(); 
       var mh = Math.ceil((ph-ah)/2); 
       $(this).css('margin-top', mh); 
      }); 
    }; 
})(jQuery); 


$(document).ready(function(){ 
    $(".slidah li img").vAlign(); 
}); 

$('.slidah').cycle({});