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

Global variables become undefined after utilizing jQuery's getScript() method for assignment

VueJS functions properly on Google Chrome, however it may encounter compatibility issues when using

Troubleshooting problem with aligning grid items at the center in React using

Using a CSS hack to create a border cutout

Adjustable Title in Line Plot

Switching visual representation that appears upon clicking the dropdown menu

Invoking the callback function within the containing scope in Typescript

What causes the size of text to change when I zoom in my browser?

Easily toggle between various image source paths

Running `npm install npm` results in encountering gyp ERR and npm ERR

div table with varying cell styles on each row

Mini-navigation bar scrolling

What is the process for adding content to a JSON object?

JavaScript pause until the DOM has been modified

IE Form SubmissionThe process of submitting a form in

Pictures Unavailable to Show in Table

Tips for sending multiple pieces of data to an Arduino with NodeJS's serialport library

Engaging with tasks like incorporating fresh elements into JavaScript code

Adding my 'no' or 'id' in a URL using a JavaScript function can be accomplished by creating an onClick event

Encountering an unexpected token in the JSON file at the very start is causing an