BobDerBaumeister BobDerBaumeister - 5 months ago 19
CSS Question

dynamically generated element appears lowly by using opacity and transition? (javascript, css)

my goal is to create a li element by pressing a button. this element should appear slowly. I want to use css and javascript with jquery.

that's what i tried:

$(document).on('click', '.add', function(){

var li = '<li style="transition: all 10s; opacity: 0;"> some content </li>';
$(li).appendTo("ul");
$("li").last().css( "opacity", "1" );

});


sadly this didn't work. For some reason the delay has no effect on the generated li item. So what do i need to change?

Answer

Check this out.. This will solve your problem

http://jsfiddle.net/tirthrajbarot/tfmFx/39/

html

<button>Click me</button>


<ul id="myList">
</ul>

JS:

   $('button').live('click', function() {
    $("#myList").append("<li class='fade'>This is just a test</li>")
        setTimeout(function(){$(".fade").addClass("in");}, 0)
});

CSS

 .fade.in { opacity:1;}
 .fade {  opacity: 0; -webkit-transition: opacity 0.7s linear; }