javascript - 为图像容器超链接附加字符串添加淡入淡出效果

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;
}

当我在 a.append(img) 之后添加 .fadeIn(1000) 时，新添加的图像容器超链接无法显示图像。

以下是实际案例: http://jsfiddle.net/9b2Ut/3

Answer 1

查看我的更新Fiddle

在fadein之后，jQuery将display:inline设置为元素，因此你必须为提供display: inline-block !important; >#画廊a