CODEWITHSUNDEEP
javascriptjquery
user2250471
user2250471

Reputation: 1112

Simultaneously fadeIn and insertBefore

I'm trying to animate the last line of the code below, but it's not working. Is it because I'm combining jquery with regular 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();
    }
}

Upvotes: 1

Views: 1554

Answers (4)

user3347562
user3347562

Reputation: 29

For jQuery fadeIn and slideIns you need to have the element first hidden. Also you are going to want to only use jQuery. The way jQuery handles selectors, it's much more simple for you to handle everything in jQuery.

for whatever element you need to have the css hide it first

display: hidden;

you can do this through javascript:

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

once the element is hidden, the fadeIn should work.

JsFiddle Example

Upvotes: 0

CRABOLO
CRABOLO

Reputation: 8793

If you're already using jQuery, you might as well not use plain javascript if you don't have to

This 

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

Could be written as short and simple, as something like this

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

Also, to get the fade working, you could do this :

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

Just use display none so it doesn't show right away, and then fadeIn()

In order for an element to fadeIn , it must be hidden first.

EDIT :

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

This is if you want the whole parent div to fadeIn

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

http://jsfiddle.net/57ntS/

This is if you want just the text/new div to fadeIn

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

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

Upvotes: 3

epascarello
epascarello

Reputation: 207517

You are not using insertBefore right

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

The correct usage is one argument: newElement.insertBefore( target )

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

Another way

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

Upvotes: 0

4m1r
4m1r

Reputation: 12552

Are you trying to do this?

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

Fiddle: http://jsfiddle.net/5NK7n/

Upvotes: 0

Related Questions