javascript - 无法为绝对定位图像的宽度设置动画

标签 javascript jquery html css

我目前使用的是 jQuery 10.4.2。我想平滑地放大绝对定位的图像。当我使用下面的代码时,我没有得到任何错误,但是动画没有出现。相反,图像只是捕捉到完整 (100%) 大小。

HTML

<div class="box">
    <img class="scaleMe" src="img.gif" />
</div>

CSS

.box { position:relative; height:0; padding-bottom:61.6667%; background-image:url('background.gif'); }
.scaleMe { display:block; position:absolute; bottom:0; left:0; z-index:1; width:50%; }

JS

    $('.scaleMe').animate({width:'100%'}, 2000);

我做错了什么?

更新:

这是一个有效的 jsFiddle:http://jsfiddle.net/s_d_p/27DhK/

但是here是一个不起作用的现场演示。

最佳答案

您的图片标签上没有 src。尝试:

<div class="box">
    <img class="scaleMe" src="http://placekitten.com/g/200/300" />
</div>

http://jsfiddle.net/GZ8yX/

关于javascript - 无法为绝对定位图像的宽度设置动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22177901/

相关文章:

javascript - 多次爆炸和 foreach,同时在 txt 文件 html/php/ajax 中搜索 `input` 值

javascript - 如何使用包含所有菜单项的容器获得全宽下拉区域

html - 收集所有 Javascript、CSS 和图像以部署网站或应用程序?

java - 如何从不同级别的 div 定义 xpath

javascript - 如何在按钮单击事件上调用处理事件以添加新行的java脚本?

javascript - 如何使用Javascript等待元素在Selenium中可交互

javascript - 如何在 sqlite3 db.get 和 db.all 中使用 async/await?

jquery - 状态成功时的 Ajax 用户通知

javascript - 如果容器高度小于固定值,则隐藏元素

jquery - 如何使用 jquery 和 ajax 从数据库中的数据创建 HTML 表格