Добавить эффект FadeIn контейнерного изображения гиперссылки дописывание строки

Question

Это галерея:

<div id="gallery"> 
    <a href="images/gallery/big/01.jpg"><img src="images/gallery/01.jpg"></a> 
    <a href="images/gallery/big/02.jpg"><img src="images/gallery/02.jpg"></a> 
    <a href="images/gallery/big/03.jpg"><img src="images/gallery/03.jpg"></a> 
    <a href="images/gallery/big/04.jpg"><img src="images/gallery/04.jpg"></a> 
    <a href="images/gallery/big/05.jpg"><img src="images/gallery/05.jpg"></a> 
    <a href="images/gallery/big/06.jpg"><img src="images/gallery/06.jpg"></a> 
    <a href="images/gallery/big/07.jpg"><img src="images/gallery/07.jpg"></a> 
    <a href="images/gallery/big/08.jpg"><img src="images/gallery/08.jpg"></a> 
    <button class="more">show me more</button> 
</div> 

Это показывает 8 изображений по умолчанию, и есть кнопка для загрузки больше:

var num = 8; 
var incr = 4; 
$(function() { 
    $('button.more').click(function(){ 
    for (var i = 0; i < incr; i++){ 
     num++; 
     var a = $('<a class="photo"></a>') 
      .attr('href', 'images/gallery/big/' + padLeft(num.toString(), '0', 2) + '.jpg'); 
     var img = $('<img alt="" />') 
      .attr('src', 'images/gallery/' + padLeft(num.toString(), '0', 2) + '.jpg');   
     a.append(img); 
     a.insertBefore($(this)); 
    } 
    if (num > 15){ 
    $(".more").hide(); 
    } 
}); 
}); 

function padLeft(str, pad, len) { 
var val = str; 

while (val.length < len) 
    val = pad + val;  

return val; 
} 

Когда я добавляю .fadeIn(1000) сразу после a.append(img), новые гиперссылки контейнера добавленного изображения не отображают изображение.

Вот случай в действии: http://jsfiddle.net/9b2Ut/3

Answer 1

см мой обновленный Fiddle

После fadein JQuery установить display:inline в элемент, поэтому вы должны дать display: inline-block !important; для #gallery a

Answer 2

Во-первых, добавить дисплей: ни к вашему якорю:

var a = $('<a style="display:none" class="photo"></a>')

второй, размещение FadeIn должен прийти после добавления:

a.append(img); 
a.insertBefore($(this)); 
a.fadeIn(1000); 

Следует также указать, что вы houldn't начинают увядать элемент в том, что не был вставлен в DOM еще, поэтому я переехал вызов после InsertBefore вызова