Question: ```
<div class="col-md-3" id="button1">
    <p id="text1">Button1</p>
</div>
<div class="col-md-3" id="animate1"></div>

```

```
#animate1 {
    margin-left:1%;
    margin-right:1%;
    width:23%;
    background-color:blue;
}

#button1 {
    background-color:white;
    text-align:center;
    margin-left:1%;
    margin-right:1%;
    width:23%;
    margin-top:0%;
    margin-bottom:0%;
    padding-top:1.5%;
    padding-bottom:1.5%;
}

#button1:hover {
    background-color:red;
}

```

```
$("#button1").click(function () {
    $("#animate1").animate({
        "width": "70%",
            "left": "+=50px"
    }, "slow");
});

```

I was tying to use Jquery to do some animation. 
What I want to achieve is when button1 was clicked, animate1 would move and change width. However it simply won't work...

Any possible solutions? Thanks a lot.

Answer: 
The `<div>` element you would like to animate, has no height. Animation works, you're just not able to see it. Set any height and you're good.
Set a height for the animated object. For example 

```
$("#button1").click(function() {
    $("#animate1").animate({
     "height": "10px",              
     "width": "70%",
     "left": "+=50px"
    },"slow");
});

```

should do it