Jquery 在多个元素上链接css动画_Jquery_Html_Css_Animation

Jquery 在多个元素上链接css动画

jquery html css animation

Jquery 在多个元素上链接css动画,jquery,html,css,animation,Jquery,Html,Css,Animation,我正在建立一个网站，它使用多个css动画，在按下一个按钮后“链接”，我在使用所需的jQuery时遇到了问题（我不是很有经验）下面是一个简单的网站，我已经建立了正确的代码-它包括两个相同的球-一个淡出，另一个左移到右 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title>

我正在建立一个网站，它使用多个css动画，在按下一个按钮后“链接”，我在使用所需的jQuery时遇到了问题（我不是很有经验）

下面是一个简单的网站，我已经建立了正确的代码-它包括两个相同的球-一个淡出，另一个左移到右

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>Untitled Document</title>
        <link href="css/move.css" rel="stylesheet" type="text/css">
        <script src="http://code.jquery.com/jquery-2.0.1.min.js"></script>
        <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    </head>

    <body>
        <section class="container">
            <figure id="ball"></figure>
            <figure id="ball2" </figure>
        </section>
        <section class="controls">
            <button class="button" id="button">Forwards</button>
        </section>
        <script type="text/javascript">
            $(function() {
                $("#forwards").click(function() {
                    $('#ball').fadeOut(function() {
                        $('#ball2').moving();
                    });
                });
            }); //end ready
        </script>
    </body>
</html>

但我不能让它工作。任何帮助都将不胜感激

（正确的页面将有一组相当复杂的动画，因此addClass/removeClass方法可能更好

非常感谢

您的“转发”按钮id不正确。您将其作为

#转发

，但实际上它是

#按钮

不过，我不确定

$（'#ball2'）.moving（）

应该做什么。您没有包含该片段

使用第一个示例：

$（函数（）{
$（“#按钮”）。单击（函数（）{
$（“#ball”）.fadeOut（函数（）{
$（'#ball2'）。移动（）；
});
});
})；


无标题文件
球文本
ball2文本
转发

这可能会有所帮助：检查您正在使用的ID，您的选择器在这里没有意义

“#转发”

“#石头”“#控件”您的

#ball2

元素有语法错误。另外，需要关闭

meta

标记。很抱歉，该标记与css相关，并使ball2在页面上从左向右移动。我将在周四尝试返回此内容。非常感谢所有对此做出贡献的人。我已更正html。原始js脚本仍然无法工作所以我修改了我的选择，如下jQuery（document）.ready（function（）{jQuery（#button”）.click（function（）{jQuery（#ball”）.addClass（“fadeOut”）；jQuery（#ball2”）.addClass（“moving”）；}）//结束准备好了，谢谢你的帮助。

<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery("#button").click(function() {
            jQuery("#stone").addClass("reveal");
            jQuery("#controls").addClass("fade_button");
        });
    });
</script>