当我启用CSS动画时，jQuery hide（）。slideDown（）不起作用

Question

I'm new to this.

I used jQuery to make three divs (buttons) slideDown at page load. Then I made them expand a little (downwards) when mouseover'd. This worked well in Safari but not in Firefox. So I changed around a few things.

Now I have CSS animations to make them expand on hover and a jQuery function to make them slideDown on load. But this slideDown doesn't seem to work properly.

HTML:

<div class="header">
    <div class="button_container">
        <a href = "../index.htm"><div class="header_button home_button">Back to 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 all ease-in-out;
    -ms-transition: 0.5s all ease-in-out;
    -webkit-transition: 0.5s all ease-in-out;
    -o-transition: 0.5s all ease-in-out;
}

.header_button:hover {
    background-color: lightyellow;
    height: 140px;
    -moz-transition: 0.5s all ease-in-out;
    -ms-transition: 0.5s all ease-in-out;
    -webkit-transition: 0.5s all ease-in-out;
    -o-transition: 0.5s all ease-in-out;
}

Some of the stuff has been copy-pasted from all over Stack Overflow. But now I've got the hover-expand thing working.

jQuery:

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

Convenient jsFiddle.

Answer 1

Updated Fiddle

Check this code,

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

Though you hide .header_button it has parent <a> which is still visible.