BobDerBaumeister BobDerBaumeister - 1 year ago 89
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").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 Source

Check this out.. This will solve your problem


<button>Click me</button>

<ul id="myList">


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

CSS { opacity:1;}
 .fade {  opacity: 0; -webkit-transition: opacity 0.7s linear; }
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download