具有动画高度的jquery重叠图像

标签 jquery html css animation

我在 jquery 中进行一些转换,但遇到了困难。我想在这个具有红色背景的 div 中单击以将 div 与图像重叠。

HTML

<div id="img_div1">
<img class="img" src=""  id="img" />

CSS

#img_div1
{
width:333px;
height:70px;
background:url("img/1.jpg");
}

.img1{ 高度:0px; 宽度:333px; }

jQuery

$(文档).ready(函数(){ $("#img_div1").click(函数 (){
$(".img1").animate({"height":"70px"},1000).attr("src", "http://gglys.com/images/logo.png "); }); });

这是我在 JSFiddle 中的代码

http://jsfiddle.net/24jsfbv8/

最佳答案

您发布的 JSfiddle 几乎可以正常工作。您只是没有选择 jQuery,需要将 html 中的“img”类更改为“img1”,如下所示:

<img class="img1" src=""  id="img" />

Updated JSfiddle

关于具有动画高度的jquery重叠图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26468686/

相关文章:

javascript - 如何给 asp 按钮一个特定的快捷方式

ajax - $(document).ajaxstart 未触发

javascript - 如何在 Javascript 中检索单选按钮值

html - margin-right 不适用于图像

html - 如何从我的 Bootstrap 网格列中删除空白空间?

javascript - 在切换时添加和删除类

asp.net - ASP.NET MVC 应用程序的高级主题

javascript - 创建一个函数来编辑和删除表格中的输入 - Laravel 5.2

javascript - 隐藏 Ember 咆哮通知时删除 div

css - 在 IE11 中悬停时边距发生变化