jquery - 追加到 div 后淡入某个对象？

Question

如何使附加的 HTML fadeIn() 不淡入同一类的所有对象？该函数将被多次使用，并且我无法向创建的对象添加 ID，否则它会与我即将添加的内容发生冲突。如果您有帮助，谢谢

CSS:

        #log {
            background-color:#4D4D4D;
            height:400px;
            width:600px;
            left:31%;
            position:fixed;
            z-index:-10;
            margin-top:-10px;
        }
        .logArrow {
            height:24px;
            width:24px;
            background: url('http://www.industus.com/img/log1.png') center no-repeat;
            margin-top:10px;
            display:none;
        }
        .logMsg {
            color:white;
            display:none;
        }
        .inline {
            display:inline-block;
            margin-left:5px;
        }

jQuery:

function log(message) {
                $("<div class='logArrow inline'></div><div class='logMsg inline'>"+message+"</div><br />").appendTo("#log").fadeIn(3000);
}

HTML:

<div id="log">
</div>

Answer 1

您应该将要插入的内容包装在容器 div 中，并将其设置为 display: none，然后对其调用 .fadeIn():

Example

CSS:

#log {
    background-color:#4D4D4D;
    height:400px;
    width:600px;
    left:31%;
    position:fixed;
    z-index:-10;
    margin-top:-10px;
}
.logArrow {
    height:24px;
    width:24px;
    background: url('http://www.industus.com/img/log1.png') center no-repeat;
    margin-top:10px;
    /* REMOVE display: none; FROM HERE */
}
.logMsg {
    color:white;
    /* REMOVE display: none; FROM HERE */
}
.inline {
    display:inline-block;
    margin-left:5px;
}
.message { /* ADD THIS CLASS */
    display: none;
}

jQuery:

function log(message) {
    $('<div class="message"></div>')
        .append('<div class="logArrow inline"></div>')
        .append('<div class="logMsg inline">'+ message +'</div>')
        .appendTo("#log")
        .fadeIn();
}