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


my goal create li element pressing button. element should appear slowly. want use css , javascript jquery.

that's tried:

$(document).on('click', '.add', function(){      var li = '<li style="transition: 10s; opacity: 0;"> content </li>';     $(li).appendto("ul");     $("li").last().css( "opacity", "1" );  }); 

sadly didn't work. reason delay has no effect on generated li item. need change?

check out.. solve 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 test</li>")         settimeout(function(){$(".fade").addclass("in");}, 0) }); 

css

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

Comments

Popular posts from this blog

wordpress - (T_ENDFOREACH) php error -

Export Excel workseet into txt file using vba - (text and numbers with formulas) -

Using django-mptt to get only the categories that have items -