Как мне анимировать prepend?

Хочу чтобы не сразу появлялся prepand, а немного анимировано: появлялся не так быстро и справа налево.
Вот моя реализация:
$('.client').hover(function() { $(this).prepend('

Remove

').show('fast') }, function() { $('.remove').remove(); }); $('body').on('click', '.remove', function() { $(this).parent().remove(); }) .panel { margin: 10px; } .remove { float: right; }

Фамилия имя: Иванов Иван

Телефон: +7911111233

email: test@mail.ru

Фамилия имя: Иванов Иван

Телефон: +7911111233

email: test@mail.ru

Фамилия имя: Иванов Иван

Телефон: +7911111233

email: test@mail.ru

То есть мне нужен вот этот код преобразовать $(this).prepend('

Remove

').show('fast')

Ответ

Нет смысла всякий раз при hover создавать элемент и анимировать его JS-ом. Если не хочется лопатить разметку, можно .remove просто добавить в блоки по готовности документа, а дальше css сделает своё.
$('body').on('click', '.remove', function() { $(this).parent().remove(); }) *{ box-sizing:border-box; } body{ margin:0; } .panel { margin: 10px; } .client{ position:relative; overflow:hidden; } .caption{ padding-right:80px; } .client .remove{ display:inline-block; position:absolute; right:-50px; top:30px; cursor:pointer; opacity:0; transition:all .3s ease; } .client:hover .remove{ right:10px; opacity:1; }

Фамилия имя: Иванов Иван

Телефон: +7911111233

email: test@mail.ru

remove

Фамилия имя: Иванов Иван

Телефон: +7911111233

email: test@mail.ru

remove

Фамилия имя: Иванов Иван

Телефон: +7911111233

email: test@mail.ru

remove