javascript - jQuery hide().slideDown() does not work when I have CSS animations enabled -

i'm new this.

i used jquery make 3 divs (buttons) slidedown @ page load. made them expand little (downwards) when mouseover'd. worked in safari not in firefox. changed around few things.

now have css animations make them expand on hover , jquery function make them slidedown on load. slidedown doesn't seem work properly.

html:

<div class="header">     <div class="button_container">         <a href = "../index.htm"><div class="header_button home_button">back home</div></a>         <a href = "../projects/projects.htm"><div class="header_button projects_button">projects</div></a>         <a href = "../resume/resume.htm"><div class="header_button resume_button" >resume</div></a>     </div> </div> 

css:

.header_button {     display: inline-block;     height: 130px;     line-height: 130px;     width: 300px;     background-color: lightgrey;     color: black;     box-shadow: 0 0 10px;     -moz-transition: 0.5s ease-in-out;     -ms-transition: 0.5s ease-in-out;     -webkit-transition: 0.5s ease-in-out;     -o-transition: 0.5s ease-in-out; }  .header_button:hover {     background-color: lightyellow;     height: 140px;     -moz-transition: 0.5s ease-in-out;     -ms-transition: 0.5s ease-in-out;     -webkit-transition: 0.5s ease-in-out;     -o-transition: 0.5s ease-in-out; } 

some of stuff has been copy-pasted on stack overflow. i've got hover-expand thing working.

jquery:

$(document).ready(function() {     $('.header_button').hide().slidedown('slow'); }); 

convenient jsfiddle.

updated fiddle

check code,

$(document).ready(function() {     $('.header_button').parent().hide().slidedown('slow'); }); 

though hide .header_button has parent <a> still visible.