淡入一個jQuery UI進度

Question

範例網站：http://johanberntsson.se/dev/fotosida/

相關代碼：

jQuery.fn.center = function() { 

    this.css("position","absolute"); 
      this.css("top", (($(window).height() - this.outerHeight())/2) + $(window).scrollTop() + "px"); 
      this.css("left", (($(window).width() - this.outerWidth())/2) + $(window).scrollLeft() + "px"); 
      return this; 
} 


$.each(data, function (index, val) { 
    $('<img/>').data({ 
     exif: val.exif 
    }).attr({ 
     'src': 'fotosida/' + val.full_url + "?" + new Date().getTime(), 
     'class': 'mainimages' 
    }).css({ 
     'margin': '10px auto', 
     'display': 'block' 
    }).hide().appendTo('body'); 
}); 

$('#progressbar').center().fadeIn(500); 

var i = 1; 

$('body img.mainimages').load(function() { 
    $("#progressbar").progressbar({ 
     value: (i/data.length) * 100 
    }); 
    i++; 
    if(i > data.length) { 
     setTimeout(function() { 
      $('#progressbar').fadeOut(500, function() { 
       $('body img.mainimages').fadeIn(200); 
      }); 
     }, 200); 
    } 
}); 

我不明白的是，爲什麼裝載機不褪色它只是彈出像我了。使用show()

任何幫助表示讚賞！

Answer 1

我想這是因爲你沒有創建進度條，直到第一個圖像加載。所以，它確實淡入，但它在這一點上是一個空格。一旦第一個div加載，進度條就會被初始化。

嘗試這樣做：

$('#progressbar').progressbar({ value: 0 }).center().fadeIn(500); 

作爲一個補充說明，如果你使用這個作爲你#progressbar CSS，你不需要特殊的center()功能，進度條將保持居中如果窗口調整大小：

#progressbar { 
    display: none; 
    width: 900px; 
    height: 2em; 
    position: absolute; 
    margin-left: -450px; 
    margin-top: -1em; 
    left: 50%; 
    top: 50%; 
}