追加和添加类以动画处理失败

append and addClass to animate failed

本文关键字：动画 处理 失败 添加 追加      更新时间：2023-09-26

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

您

还需要添加类animated。

阅读文档。

$('#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 li 元素后立即在#ticketsDemosss上使用 addClass。您要实现的是，在附加 li 元素之前/之后对新的 li 元素使用 addClass。

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

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

所以你的代码不起作用，因为默认情况下.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>

相关文章：