对新创建的元素淡入淡出

Question

我知道有一个 JQuery 函数名称 fadeIn() 并搜索了一些有关如何使用它的信息。我在 W3Schools 上阅读了这篇文章：

The jQuery fadeIn() method is used to fade in a hidden element.

但我会为我刚刚创建的元素使用该函数来淡入，它没有隐藏！有没有办法对新创建的元素产生相同的效果？这里有一些代码可以玩它：

$("#resultaatArtisten").append(
    '<div class="option-item">' +
        '<input type="hidden" value="' + var1 + '"/>' +
        '<div class="artist-foto-container">' +
            '<img src="' + image + '" class="artist-foto" alt="Foto van ' + name + '"/>' +
        '</div>'+
        '<p>' + name + '</p>' +
    '</div>'
);

Answer 1

在第一个 div 标签中，您可以添加 style="display:none"，或者您可以将 display:none; 添加到 CSS 文件中的 .option-item。

编辑

建议您将 display 属性添加到 CSS 文件中。

.option-item{display:none;}

Answer 2

试试这个：

$("#resultaatArtisten").hide().append(
    '<div class="option-item">' +
        '<input type="hidden" value="' + var1 + '"/>' +
        '<div class="artist-foto-container">' +
            '<img src="' + image + '" class="artist-foto" alt="Foto van ' + name + '"/>' +
        '</div>'+
        '<p>' + name + '</p>' +
    '</div>'
).fadeIn();

对新创建的元素淡入淡出

Fade in effect for new created elements

html

jquery

append

fadein