Сохранить объект jquery, который был вставлен в DOM

Question

Я использую jQuery, чтобы добавить значок тега в DOM. Я хочу, чтобы он был вставлен с непрозрачностью 0, а затем сразу после этого появлялся с animate().

В настоящее время я вставив его, как это:

$('.tag_boxes').append("<span class='tag_box' data-title='"+word+"'>"+word+"<a class='remove_tag'>x</a></span>"); 

Есть ли способ, чтобы кэшировать этот тег <span> как объект JQuery немедленно с этой операцией? Так что я могу вызвать анимацию на следующей строке. Что-то вроде:

var s = $('.tag_boxes').append("<span class='tag_box' data-title='"+word+"'>"+word+"<a class='remove_tag'>x</a></span>"); 
s.animate({'opacity':1}); 

Там не может быть решением, используя append(), но есть еще одна функция, которая может это сделать?

Я знаю, что я могу дать тегу идентификатор, а затем получить доступ к нему с помощью jQuery, но я подозреваю, что это будет запрашивать DOM и снова искать этот элемент (исправьте меня, если я ошибаюсь) - я бы предпочитают использовать наиболее эффективное решение, если это возможно.

Answer 1

Создать объект JQuery из диапазона HTML:

var s = $("<span class='tag_box' data-title='"+word+"'>"+word+"<a class='remove_tag'>x</a></span>"); 
$('.tag_boxes').append(s); 

s.animate({'opacity':1}); 

Answer 2

Другим решением будет делать это с помощью CSS:

@-webkit-keyframes show_tag_box { 
    0% { opacity: 0; } 
    100% { opacity: 1; } 
} 

.tag_box { 
    width: 100px; 
    height: 100px; 
    background-color: black; 
    -webkit-animation: show_tag_box 500ms; 
} 

Fiddle. Не забудьте браузерные префиксы.