17

我有一个 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 向下滑动，我只想要预先设置动画的 NEW LI。

想法？谢谢

4

2 回答 2

41

.prependTo()您可以使用and更轻松地执行您想要的操作$(html)，如下所示：

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

您可以在此处查看上述代码的演示

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

最后一件事，如果您多次执行此操作，请确保 ID 上的 ID<li>是唯一的，否则您正在创建无效的 HTML，这会产生一些不需要的副作用。

于 2010-05-21T14:59:20.590 回答
0

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

你可以达到敬虔。

于 2015-09-08T21:36:23.410 回答