在.text之后调用函数

Question

I'm having a problem calling a function after appending text in order to have the #line2 fadeIn nicely. If I run this code, everything after.append is printed as text, including the second nested function. http://jsfiddle.net/jJyL4/1/

$("#line2").append("<div id='normal-text'></div>") {
    $("#line2").text("SOMETEXT").fadeIn({
        opacity: 1
    }, 1500);
});

Answer 1

try this:

$("#line2").append("<div id='normal-text'></div>");
$("#line2").text("SOMETEXT").fadeIn({opacity: 1}, 1500);

Working Demo

Answer 2

$("#line2").text("SOMETEXT").fadeIn(4000);

http://jsfiddle.net/jJyL4/4/

.fadeIn() function will automatically set opacity property to 1, you can just set duration.

Answer 3

Your syntax is incorrect, you can't write

$("#line2").append(...)

The bold part there is not allowed in JavaScript.

Now, if you have this HTML:

<div>
    <div id="normal-text">TEXT</div>
    <div id="line2"></div>
</div>

The problem is that after calling

$("#line2").append("<div id='normal-text'></div>");

You will end up with this:

<div>
    <div id="normal-text">TEXT</div>
    <div id="line2">
        <div id="normal-text">TEXT</div>
    </div>
</div>

I'm not sure you want that. Maybe this is what you're looking for:

$("#line2").hide().text("SOMETEXT").fadeIn(1500);

WORKING DEMO