同時淡入淡出和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

回答

相關問題