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

首先，将display：none添加到您的锚点：

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

第二，fadeIn的放置应该在追加之后出现：

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

还应该指出，你不应该开始淡化尚未插入DOM的元素，这就是为什么我在调用insertBefore之后将调用移到

将fadeIn效果添加到图像容器超链接追加字符串

2 个答案: