CODEWITHSUNDEEP
javascriptjqueryhtmldom
Marco Prins
Marco Prins

Reputation: 7419

Save jquery object that has been inserted into DOM

I am using jQuery to add a tag icon into the DOM. I want it to be inserted with opacity 0 and then appear with animate() immediately after that.

Currently I am inserting it like this: 

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

Is there a way to cache this <span> tag as a jQuery object immediately with this operation? So that I can call animate on the next line. Something like:

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

There might not be a solution using append() but is there another function that can do it?

I know that I can give the tag an ID and then access it with jQuery, but I suspect doing that will query the DOM and look for that element all over again (correct me if i'm wrong) - I would prefer to use the most efficent solution if possible.

Upvotes: 0

Views: 42

Answers (2)

ostrgard
ostrgard

Reputation: 380

Another solution would be doing it with 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. Don't forget browser prefixes.

Upvotes: 0

MrCode
MrCode

Reputation: 64526

Create a jQuery object from the span 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});

Upvotes: 3

Related Questions