Question

＆＃13;

$('#clickMe').click(function() {
  $('#ticketsDemosss').append($('<li>').text('my li goes here')).addClass('fadeIn');
});

＆＃13;

<link href="http://s.mlcdn.co/animate.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<dl id="viewbranchcontact-2">
  <ul id="ticketsDemosss" class="tickets">
    <!-- add LI here -->
  </ul>
</dl>

<button id="clickMe">Click Me</button>

＆＃13;

任何想法为什么上面的代码都不起作用？我使用animate.css库来尝试在插入时淡入我的li，但它有电影。

https://jsfiddle.net/to9fs7t4/

Answer 1

您还需要添加课程animated。

阅读docs。

＆＃13;

$('#clickMe').click(function() {
  $('#ticketsDemosss').append($('<li>').text('my li goes here').addClass('animated fadeIn'));
});

＆＃13;

<link href="http://s.mlcdn.co/animate.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<dl id="viewbranchcontact-2">
  <ul id="ticketsDemosss" class="tickets">
    <!-- add LI here -->
  </ul>
</dl>

<button id="clickMe">Click Me</button>

＆＃13;

Answer 2

所以你的代码不起作用，因为默认情况下.append方法附加了元素＆amp;显示它，所以你的addClass(fadeIn)不会有任何影响，其次你要添加到ul而不是li

尝试以下代码，更正@Mosh Feu的代码

$('#clickMe').click(function() {
  $('#ticketsDemosss').append($('<li>').text('my li goes here')
                                       .addClass('animated fadeIn')
                             );
});

<link href="http://s.mlcdn.co/animate.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<dl id="viewbranchcontact-2">
  <ul id="ticketsDemosss" class="tickets">
    <!-- add LI here -->
  </ul>
</dl>

<button id="clickMe">Click Me</button>

Answer 3

目前，在将{strong>附加到#ticketsDemosss 一个li元素后，您立即在#ticketsDemosss上使用了addClass。您要实现的目标是在追加li元素之前/之后对新的li元素使用addClass。

此外，当你添加addClass时，除了所需的动画类之外，你应该有animated类。即addClass('fadeIn animated')

请参阅此链接上的jsfiddle更新，我还添加了animate.css供您查看其功能并使用它：https://jsfiddle.net/to9fs7t4/1/

append和addClass动画失败

3 个答案: