同时淡入淡出和insertBefore

我正在尝试为下面的代码的最后一行设置动画，但它不起作用。是不是因为我把jquery和普通的javascript结合起来？同时淡入淡出和insertBefore

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

来源

2014-03-12 user2250471

您是否包含在代码中的jQuery库中，以便它可用？ –

只是褪色不起作用。当我删除'$（elem）'时它会起作用。'我包含。 – user2250471

如果您已经使用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);

只需使用显示器没有因此它不显示向右走，然后淡入（）

为了使元素淡入，就必须先隐藏起来。

编辑：

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/

这是如果你想文本/新的div褪色

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

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

来源

2014-03-12 18:12:52 CRABOLO

谢谢，这样效率更高，但fadeIn仍然不起作用。 – user2250471

当我使用display：none时，不会显示任何内容。我尝试了知名度：隐藏，div的空间出现（它有边距），但它仍然是不可见的。 – user2250471

你想要做到这一点？

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

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

来源

2014-03-12 18:13:50 4m1r

您未使用的insertBefore权

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

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

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

另一种方式

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

来源

2014-03-12 18:13:52 epascarello

对于jQuery fadeIn和slideIns，您需要首先隐藏元素。你也只想使用jQuery。 jQuery处理选择器的方式，对于处理jQuery中的所有内容来说更简单。

不管什么元素，你需要有CSS隐藏它首先

display: hidden;

您可以通过JavaScript这样做：

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

一旦元素是隐藏的，在淡入应该工作。

JsFiddle Example

来源

2014-03-12 18:40:35 user3347562

同时淡入淡出和insertBefore

回答

相关问题