我的目标是通过按下一个按钮来创建一个 li 元素。这个元素应该慢慢出现。我想在 jquery 中使用 css 和 javascript。
这就是我的尝试:
$(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" );
});
遗憾的是这没有用。由于某种原因,延迟对生成的 li 元素没有影响。那么我需要更改什么?
最佳答案
检查一下...这将解决您的问题
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; }
关于javascript - 通过使用不透明度和过渡,动态生成的元素看起来很低? (JavaScript,CSS),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37761700/