CODEWITHSUNDEEP
javascriptjquerycssanimationanimate.css
Eunice Chia
Eunice Chia

Reputation: 455

append and addClass to animate failed

$('#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 idea why above code won't work? I used animate.css a library to try to fade in my li upon insert but it has flicks.

https://jsfiddle.net/to9fs7t4/

Upvotes: 0

Views: 184

Answers (3)

vinayakj
vinayakj

Reputation: 5681

So your code isnt working because by default .append method appends the element & shows it, so your addClass(fadeIn) wont have any effect, second you are adding to ul rather to li

Try below code, corrected code of @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>

Upvotes: 0

Mosh Feu
Mosh Feu

Reputation: 29327

You need to add the class animated too.

Read the 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>

Upvotes: 1

Adam Genshaft
Adam Genshaft

Reputation: 824

Currently you use addClass on #ticketsDemosss right after appending to #ticketsDemosss a li element. What you're looking to achieve is to use addClass on the new li element right before/after appending the li element.

Also, when you addClass you should have animated class in addition to the desired animation class. i.e. addClass('fadeIn animated')

See the jsfiddle update on this link, I've also added the animate.css for you to see it functions and play with it: https://jsfiddle.net/to9fs7t4/1/

Upvotes: 0

Related Questions