Question

我有一个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

Answer 1

您可以使用.prependTo()和$(html)轻松完成您想要的操作，如下所示：

$('<li id="newhere"><input type="checkbox" /><span class="listTitle">Im new here</span><ul></ul></li>')
  .hide().prependTo('#container').slideDown("slow");

You can see a demo of the above code here

.prepend()会返回您前置的元素，而不是前缀的元素。将它切换到.prependTo()会使它更清晰，并且应该具有您想要的效果，因为您可以继续链接前面的元素。此外，如果您多次使用相同的字符串，现在将缓存文档片段并使其更快：）

最后一件事，如果您多次这样做，请确保<li>上的ID是唯一的，或者您正在创建无效的HTML，这会产生一些不必要的副作用。

Answer 2

http://jsfiddle.net/eCpEL/13/

这应该有帮助

使用关键帧动画

.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();
    }
});

你可以实现敬虔。

JQUERY使用动画将LI预先添加到UL

2 个答案: