javascript - 同时 fadeIn 和 insertBefore

Question

我正在尝试为下面代码的最后一行设置动画，但它不起作用。是因为我将 jquery 与常规 javascript 相结合吗？

function addtext(name) {
    var text = document.getElementsByName(name)[0].value;
    var sth = text.length;
    if(sth > 0) {
        // $.post( "../parsers/new_text.php", { text: text } );
        var area = document.getElementsByName(name)[0];
        area.value = "";
        var div = document.createElement("div");
        var texts = document.createTextNode(text);
        div.appendChild(texts);
        var elem = document.getElementById("texts");
        $(elem).insertBefore(div, elem.firstChild).fadeIn();
    }
}

Answer 1

如果您已经在使用 jQuery，如果没有必要，您也可以不使用纯 javascript

这个

var div = document.createElement("div");
var texts = document.createTextNode(text);
div.appendChild(texts);
var elem = document.getElementById("texts");
$(elem).insertBefore(div, elem.firstChild).fadeIn();

可以写得短小精悍，像这样

$('#texts').prepend('<div>Some text you want here, and even a variable like ' + someVar + '</div>');

此外，要使淡入淡出工作，您可以这样做:

$('#texts').prepend('<div style="display: none;">Some text you want here, and even a variable like ' + someVar + '</div>').hide().fadeIn(2000);

只需使用 display none 使其不会立即显示，然后使用 fadeIn()

要使元素淡入，必须先将其隐藏。

---

编辑:

http://jsfiddle.net/57ntS/1/

这是如果你想让整个父div淡入

$('#texts').prepend('<div class="texttt">Some text you want here, and even a variable like</div>').hide().fadeIn(2200);

http://jsfiddle.net/57ntS/

如果你只想让 text/new div 淡入

$('#texts').prepend('<div class="texttt">Some text you want here, and even a variable like</div>');

$('.texttt').hide().fadeIn(2000);