append 和 addClass 动画失败答案

【问题标题】：append and addClass to animate failedappend 和 addClass 动画失败
【发布时间】：2016-11-20 05:13:41
【问题描述】：

$('#clickMe').click(function() {
  $('#ticketsDemosss').append($('<li>').text('my li goes here')).addClass('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>

知道为什么上面的代码不起作用吗？我使用 animate.css 库尝试在插入时淡入我的li，但它有轻弹。

https://jsfiddle.net/to9fs7t4/

【问题讨论】：

简答 $('<li>').text('my li goes here').appendTo($('#ticketsDemosss')).hide().fadeIn(2000);
@vinayakj hw 想使用animate.css 而不是简单的 jQuery。

标签： javascript jquery css animation animate.css

【解决方案1】：

您还需要添加类animated。

阅读docs。

$('#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>

【讨论】：

更正为$('#ticketsDemosss').append($('<li>').text('my li goes here').addClass('animated fadeIn'));
@vinayakj 再次感谢 :)
Eunice Chia，你试过这个吗？如果它解决了您的问题，请接受它，以便对其他人有所帮助。

【解决方案2】：

所以你的代码不起作用，因为默认情况下.append 方法会附加元素并显示它，所以你的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>

【讨论】：

可能只是编辑了他的代码，而不是按照您自己的答案编写代码
@ShubhamKhatri 如果你仔细看过，我也评论过，但似乎他可能很忙，所以发布了答案，因为它更多关于 OP（这里的主要主题），应该得到需要的东西。

【解决方案3】：

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

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

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

【讨论】：