Animate failed due to the appending and adding of class

Question

Animate failed due to the appending and adding of class

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

any clue why the code above isn't functioning? I attempted to use animate.css library for fading in my li upon insertion but it's causing flickers.

https://jsfiddle.net/to9fs7t4/

javascript jquery css animation animate.css

Answer 1

Answer №1

Ensure to include the class animated.

Refer to the documentation for more information.

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

Ensure to include the class animated.

Refer to the documentation for more information.

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

Answer №2

At this moment, you are utilizing addClass on #ticketsDemosss immediately after inserting a li element into it. Your goal is actually to apply addClass on the new li element right before or after appending it.

Furthermore, when you use addClass, ensure that the 'animated' class is included along with the desired animation class. For example: addClass('fadeIn animated')

Check out the updated jsfiddle on the following link, where I have also incorporated animate.css for you to experiment and observe its functionality: https://jsfiddle.net/to9fs7t4/1/

Answer 4

At this moment, you are utilizing addClass on #ticketsDemosss immediately after inserting a li element into it. Your goal is actually to apply addClass on the new li element right before or after appending it.

Furthermore, when you use addClass, ensure that the 'animated' class is included along with the desired animation class. For example: addClass('fadeIn animated')

Check out the updated jsfiddle on the following link, where I have also incorporated animate.css for you to experiment and observe its functionality: https://jsfiddle.net/to9fs7t4/1/

Answer 5

Answer №3

The reason your code is not working is because the .append method by default appends and shows the element, so adding addClass(fadeIn) won't have any effect. Also, you are adding to ul instead of li.

Here is the corrected code from @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 6

The reason your code is not working is because the .append method by default appends and shows the element, so adding addClass(fadeIn) won't have any effect. Also, you are adding to ul instead of li.

Here is the corrected code from @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>

Animate failed due to the appending and adding of class

Answer №1

Answer №2

Answer №3

Similar questions

Using Angular and Typescript to implement a switch case based on specific values

Using JavaScript to alter CSS styles with dashes

Selenium Webdriver is retrieving background colors with unexpected alpha values

Transferring data from a JavaScript struct array to GLSL

Having problems with loading @font-face in Ionic Framework Android app build?

Types of Data Encoded in Base64

In Node.js, when accessing a Firebase snapshot, it may return a

Executing a function by clicking on an element with the `ng-click` directive within a Bootstrap modal

Select a specific element to apply a CSS selector for a button

Uploading a file to an MVC controller using AJAX is unsuccessful

Invoke another component to display within a React.js application

Filter JSON data deeply for specific values

Having trouble triggering a click event with JQuery

Managing errors that occur while handling JSON with AJAX by implementing a suitable backup plan

In Snowflake, SQL error handling block fails to execute

Enhance your WooCommerce shopping experience by incorporating a variety of personalized checkout fields organized into two distinct

How can I trigger a CSS animation to replay each time a button is clicked, without relying on a timeout function?

The progress bar in Next JS 13 seems to be malfunctioning and is not displaying any

Using conditional statements like 'if' and 'else' in JavaScript can

Access to create permissions for collection "faunaDB" denied due to authorization privileges in FQL query using User Defined