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变为fadeIn

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

http://jsfiddle.net/57ntS/

如果你只想要文本/新div到fadeIn

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

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

Answer 2

你想这样做吗？

$('<div/>', {
    text: 'text'
}).fadeIn('slow', function(){
    $(this).appendTo('body');
});

小提琴：http://jsfiddle.net/5NK7n/

Answer 3

你没有使用insertBefore right

$(elem).insertBefore(div, elem.firstChild).fadeIn();

正确用法是一个参数：newElement.insertBefore( target )

$(div).insertBefore(elem.firstChild).fadeIn();

另一种方式

var $div = $(div);
$(elem).prepend($div);
$div.fadeIn();

Answer 4

对于jQuery fadeIn和slideIns，您需要先隐藏元素。此外，您将只想使用jQuery。 jQuery处理选择器的方式，让你处理jQuery中的所有内容要简单得多。

对于你需要让css首先隐藏它的任何元素

display: hidden;

你可以通过javascript执行此操作：

$('#elementId').css('display', 'hidden');

隐藏元素后，fadeIn应该可以正常工作。

JsFiddle Example

同时fadeIn和insertBefore

4 个答案: