javascript - 当我启用 CSS 动画时，jQuery hide().slideDown() 不起作用

Question

我是新手。

我使用 jQuery 在页面加载时制作三个 div(按钮)slideDown。然后我让它们在鼠标悬停时稍微(向下)扩展。这在 Safari 中运行良好，但在 Firefox 中则不然。所以我改变了一些东西。

现在我有 CSS 动画让它们在悬停时展开，还有一个 jQuery 函数让它们在加载时滑动。但是这个 slideDown 好像不能正常工作。

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;
}

有些内容是从整个 Stack Overflow 复制粘贴而来的。但现在我可以使用悬停展开功能了。

jQuery:

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

Convenient jsFiddle.

Answer 1

Updated Fiddle

检查这段代码，

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

虽然你隐藏了.header_button它有父级 <a>仍然可见。