Example

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

在附加到div之后淡出某些对象？

1 个答案:

Example