淡入一个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%; 
}