CODEWITHSUNDEEP
jqueryhtmlcssanimation
EtherealNP
EtherealNP

Reputation: 111

jquery overlape image with animation height

I'm making some transitions in jquery and Im getting stuck. I want on click to overlape div with image in this div with red color background.

HTML

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

CSS

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

.img1{ height:0px; width:333px; }

jQuery

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

HERE IS MY CODE IN JSFiddle

http://jsfiddle.net/24jsfbv8/

Upvotes: 0

Views: 41

Answers (1)

Calvin Scherle
Calvin Scherle

Reputation: 312

The JSfiddle you posted was almost working. You just didn't have jQuery selected, and needed to change the "img" class in the html to "img1", like so:

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

Updated JSfiddle

Upvotes: 0

Related Questions