CODEWITHSUNDEEP
javascriptjquery
Maihan Nijat
Maihan Nijat

Reputation: 9344

How to use animation with append in jQuery?

How to use animation while appending new element using jQuery? I went through couple of answers here but the same method does not work for me. I used show('show') and fadeIn('slow') but it does not seem that animates the new element.

$(document).ready(function() {
  $('#add-item').click(add);

  function add() {
    var newItem = $('#new-item-text');
    var span = $('<span>', {
      class: 'remove',
      click: remove
    });
    var li = $('<li>', {
      class: 'todo-item',
      text: newItem.val(),
      append: span,
      click: completed
    });
    if (newItem.val()) {
      $('ul.todo-list').append(li, $('li.todo-new')).fadeIn('slow');
      newItem.val('');
    }
  }

});
.todo-list {
  list-style: none;
  padding: 0px;
}
.todo-item {
  border: 2px solid #444;
  margin-top: -2px;
  padding: 10px;
  cursor: pointer;
  display: block;
  background-color: #ffffff;
}
.todo-new {
  display: block;
  margin-top: 10px;
}
.todo-new input[type='text'] {
  width: 260px;
  height: 22px;
  border: 2px solid #444;
}
.todo-new a {
  font-size: 1.5em;
  color: black;
  text-decoration: none;
  background-color: #ffffff;
  border: 2px solid #444;
  display: block;
  width: 24px;
  float: right;
  text-align: center;
}
.todo-new a:hover {
  background-color: #0EB0dd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<ul class='todo-list'>
  <li class='todo-item'>4L 2% Milk
    <span class='remove'></span>
  </li>
  <li class='todo-item'>Butter, Unsalted
    <span class='remove'></span>
  </li>
  <li class='todo-new'>
    <input id='new-item-text' type='text' />
    <a id='add-item' href='#'>+</a>
  </li>
</ul>

Upvotes: 0

Views: 37

Answers (1)

Poul Bak
Poul Bak

Reputation: 10929

To animate, you should start by hiding the elements, for instance by setting:

display: none;

Then fadeIn() will animate and set display: block;

Upvotes: 1

Related Questions