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()的解决方案，但还有其他功能吗？

我知道我可以给标签一个ID，然后用jQuery访问它，但我怀疑这样做会查询DOM并再次查找该元素（如果我错了，请纠正我） - 我如果可能的话，我宁愿使用效率最高的解决方案。

Answer 1

从span HTML：

创建一个jQuery对象

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。别忘了浏览器前缀。

保存已插入DOM的jquery对象

2 个答案: