CSS动画和Jquery [重复]答案

【问题标题】：CSS animation and Jquery [duplicate]CSS动画和Jquery [重复]
【发布时间】：2015-02-03 08:24:15
【问题描述】：

我需要帮助创建一个类似于 briandelaney.com 的交互式网站。我特别想在设计师使用的链接之间加入幻灯片效果。我阅读了他的代码，但我不熟悉 Javascript，但熟悉 Jquery。

我想在单击链接时滑动菜单。在此输入之后，如何使用 Javascript 为 CSS 转换设置动画？我想要动画的代码部分在 JSFiddle 上。这是动画http://jsfiddle.net/1pc4f081/3/的代码。

<section>
<div class='homecard' style="height:815px;">/* Initially, the menu is a card in the center of the page. I want this to slide to the top of the page when a link is clicked */
    <div class="menu home appear" id="mainmenu">
        <ul>
            <li class="hover-effect1">  <a href="/about" class="main-menu about-link">
                        <span class="effect" data-hover="About">
                            <span class="what">
                                <span> About</span>
                            </span>
                        </span>
                    </a>

                <div class="border right">
                    <div></div>
                </div>
            </li>
            <li class="hover-effect">   <a href="/services" class="main-menu service-link">
                            <span class="effect" data-hover="Services">
                                <span class="what">
                                    <span> Services</span>
                                    </span>
                                    </span>
                                    </a>

                <div class="border right">
                    <div></div>
                </div>
            </li>
            <li class="hover-effect 3"> <a href="contact" class="main-menu contact-link">
                            <span class="effect" data-hover="Contact">
                                <span class="what">
                                    <span> Contact</span>
                                    </span>
                                    </span>
                                    </a>

            </li>
        </ul>
    </div>
</div>

css:

.homecard {
-webkit-animation-name: pushHeaderUp;
-moz-animation-name:pushHeaderUp;
animation-name:pushHeaderUp;
-moz-animation-duration:3s;
-moz-animation-iteration-count:1;
-moz-animation-timing-function:ease;
-moz-animation-fill-mode:forwards;
-webkit-animation-duration:3s;
-webkit-animation-iteration-count:1;
-webkit-animation-timing-function:ease;
-webkit-animation-fill-mode: forwards;
animation-duration:3s;
animation-timing-function:ease;
animation-fill-mode: forwards;

}

@keyframes pushHeaderUp {
0% {
    -webkit-transform:translateY(0px);
    transform:translateY(0px);
    -moz-transform:transloateY(0px)
}
60% {
    -webkit-transform:translateY(-180px);
    transform:translateY(180px);
    -moz-transform:translateY:(-180px)
}
100% {
    -webkit-transform:translateY(-240px);
    transform:translateY(-240px);
    -moz-transform:translateY(-240px)
}

}

$(document).ready(function () {
$('.main-menu').click(function () {
    $('.homecard').addClass('.pushHeaderUp');
});

【问题讨论】：

你的问题太模糊了。请减少您的问题，并通过阅读文档等方式尝试解决每个问题。如果您没有找到解决方案，请来这里并简要说明您的问题，并且不要忘记链接涉及的有问题的代码。请注意，我们无法为您创建网站！
我认为他要求提供一些“提示和技巧”、框架等以实现相同的设计，但可以肯定的是，让他提供一些关于他想要的代码/想法是正确的跨度>
我编辑了这个问题。我想专注于 .click 。我已经完成了网站的布局。我只需要框架方面的帮助。

标签： javascript jquery html css

【解决方案1】：

您可以阅读 jQuery 框架中的 silde() 和 animate() 函数。我认为它将帮助您构建您想要的内容并更深入地了解动画主题。

【讨论】：

是的，我很熟悉这些功能，但是当我使用它们时，点击链接后我再也看不到动画了。它只显示最终结果。
演示应用程序中的动画怎么样，例如：w3schools.com/jquery/… 可以吗？如果没有，您的浏览器有问题，可能是旧版本......如果它们工作，您的代码有问题。然后安装一些调试工具，比如 FireBug for FireFox 并按照代码一步一步来。