如何为使用 jquery 创建的图像设置动画？答案

【问题标题】：How to animate an image created with jquery?如何为使用 jquery 创建的图像设置动画？
【发布时间】：2015-07-12 23:55:52
【问题描述】：

我创造了这样的东西

var pic = $('<img>').attr('src',someSrc);
$('body').append(pic);

我想在这张图片添加到身体后立即将其动画到屏幕上的某个位置，比如说：

$(pic).animate({top:'270px', left: '500px'}, 'slow');

但它不起作用。

【问题讨论】：

我觉得你还需要设置position:absolute;

标签： jquery html css jquery-animate

【解决方案1】：

我已经在浏览器中测试过，但在sn-p中似乎无法使用，可能您还需要在本地html文件中测试它

var img = $('<img src="http://static.adzerk.net/Advertisers/36e3fe661d1c4e38885da2fb2c98b1fc.png">');
img.css('position', 'absolute');
$('div#testDiv').append(img);
img.animate({ top: '270px', left: '500px' }, 'slow');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="testDiv"></div>

【讨论】：

【解决方案2】：

你必须为你的图片添加一个“位置：绝对”。

var pic = $('<img style="position: absolute;">').attr('src', someSrc);
$('body').append(pic);

pic.animate({top:'270px', left: '500px'}, 'slow');

【讨论】：

【解决方案3】：

编辑、更新

添加'，'之前，属性选择器内的双引号之后，.css("position", "relative")到pic

尝试使用.find() 与参数属性选择器"[src='" + someSrc + "']" 链接到.append()，后者返回body 元素

var someSrc = "http://lorempixel.com/200/200/technics";

var pic = $('<img>').attr('src',someSrc)
          .css("position","relative");

$("body").append(pic)
.find("[src='" + someSrc + "']")
      .animate({
        top: "270px",
        left: "500px"
      }, "slow");

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：

@itay312 能描述一下“没用”吗？，创建stacksn-ps，jsfiddlejsfiddle.net演示？
抱歉，现在可以使用了！非常感谢帮助我的朋友！ :)