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
Post a Comment