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

Add fadeIn effect to image container hyperlink append string

本文关键字：超链接 字符串 图像 fadeIn 添加      更新时间：2023-12-01

这是图库：

<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

查看我更新的Fiddle

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

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

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

第二，fadeIn的位置应该在附加之后

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

还应该指出的是，您不应该开始淡化中尚未插入DOM的元素，这就是为什么我在insertBefore调用

之后将调用移到了
相关文章：