javascript - How to use animation with append in jQuery? -
how use animation while appending new element using jquery? went through couple of answers here same method not work me. used show('show')
, fadein('slow')
not seem animates 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 { 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>
to animate, should start hiding elements, instance setting:
display: none;
then fadein()
animate , set display: block;
Comments
Post a Comment