jQuery：添加具有动态计算的top属性的元素

为了执行一些动画，我需要添加第二个图像，与文档中已有的图像相同，

top

属性的值等于图像的高度

现在我有：

$("#blur").after("<img src='someimg.jpg' id='above' >");
var t = -($("#blur").height());
$("#above").animate({top: t}, 1);

$（“#模糊”）。在（“”）之后；
var t=-（$（“#模糊”）.height（）；
$（“#以上”）.animate（{top:t}，1）；

但它相当丑陋——人们可以看到新元素被创建并移动到正确位置的时刻

是否有办法将第二个

放置在自动计算的

顶部
瓦卢

我的目标是让两个相同的图像一个叠在另一个上面
 当然，在将新图像添加到DOM之前，只需设置“top”CSS样式属性：

 var t = $('#blur').height();
 $('<img src="someimg.jpg" id="above">')
 .css('top', -t)
 .insertAfter('#blur');

p、 在字符串和HTML代码段周围使用单引号，这样就可以为HTML属性使用正确的双引号字符

编辑-有关更通用的解决方案（请参见）

我认为原始元素必须具有
position
属性
fixed
或
absolute
，才能正常工作，并且您可能还需要考虑任何边距或填充。
当然，在将新图像添加到DOM之前，只需设置“top”CSS样式属性：

 var t = $('#blur').height();
 $('<img src="someimg.jpg" id="above">')
 .css('top', -t)
 .insertAfter('#blur');

p、 在字符串和HTML代码段周围使用单引号，这样就可以为HTML属性使用正确的双引号字符

编辑-有关更通用的解决方案（请参见）

我认为原始元素必须具有
position
属性
fixed
或
absolute
，才能正常工作，您可能还需要考虑任何边距或填充。
太好了！很好。我可以用类似的方式获取新图像的
src
吗？你说的“获取”src是什么意思？啊，你的意思是你希望两个元素相同，而不事先知道第一个图像是什么？谢谢！基于您的代码，我使用了类似的代码：
$（“#blur”）.clone（）.removeAttr（'id'）.attr（'id'，'over'）.css（'top'，t.）.insertAfter（'#blur'）太好了！很好。我可以用类似的方式获取新图像的
src
吗？你说的“获取”src是什么意思？啊，你的意思是你希望两个元素相同，而不事先知道第一个图像是什么？谢谢！基于您的代码，我使用了类似的代码：
$（“#blur”）.clone（）.removeAttr（'id'）.attr（'id'，'over'）.css（'top'，t.）.insertAfter（'#blur'）
function overlay(selector, new_id) {
    $(selector)
    .clone()
    .removeAttr('id')
    .attr('id', new_id)
    .css({
        position: 'absolute', left: 0, top: 0
    })
    .insertAfter(selector);
}