JQUERY通过动画将安莉添加到UL
JQUERY通过动画将安莉添加到UL
提问于 2010-05-21 22:56:54
我有一个UL，我正在努力通过一些动画动态地将一个新的LI添加到UL的顶部。
到目前为止，我有以下几个工作正常的：
$("#container").prepend('<li id="newhere"><input type="checkbox" /><span class="listTitle">Im new here</span><ul></ul></li>').hide().slideDown("slow");#container是UL
上面的问题是隐藏了整个UL，然后向下滑动整个UL，我只想要预先设置动画的新LI。
想法？thxs
回答 1
Stack Overflow用户
发布于 2015-09-09 05:36:23
这应该会有帮助
使用关键帧动画
.comefromtop {
animation: comefromtop 0.5s;
}
.pushdown {
animation: pushdown 0.5s;
}
@-webkit-keyframes comefromtop {
0% { opacity:0; -webkit-transform: translateY(-100%); }
100% { opacity:1; -webkit-transform: translateY(0px); }
}
@-webkit-keyframes pushdown {
0% { /*opacity:0;*/ -webkit-transform: translateY(-10%); }
100% { /*opacity:1;*/ -webkit-transform: translateY(0); }
}并使用基本的javascript
function add() {
var val = $('#input').val();
var item = $('<li></li>').addClass('comefromtop').attr('id',val).text(val); $('#Trees').prepend(item).addClass('pushdown');
setTimeout(function () {
$('#Trees').removeClass('pushdown');
}, 600);
}
$('.add').click(add);
$('#input').on('keypress',function (e) {
if (e.keyCode === 13) {
add();
}
});你可以达到敬畏的程度。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/2883154
复制相关文章
相似问题