Question

我正在构建一个使用多个css动画的网站，链接＆＃34;按下一个按钮，我遇到了所需的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>

我还尝试了以下代码

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

@charset "utf-8";
/* CSS Document */

#ball {
    height: 200px;
    width: 200px;
    border-top: 2px solid red;
    border-right: 2px solid green;
    border-bottom: 2px solid yellow;
    border-left: 2px solid blue;
    border-radius: 100%;
    opacity: 1; 
    margin: 200px 200px; 
}
#ball2 {
    height: 200px;
    width: 200px;
    border-top: 2px solid red;
    border-right: 2px solid green;
    border-bottom: 2px solid yellow;
    border-left: 2px solid blue;
    border-radius: 100%;
    opacity: 1; 
}        
.controls {
    top: 10px;
    position: fixed; 
}   

.moving {
    animation: moving 6s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards; 
}   

@keyframes moving {
    from { transform: translateX(0px) rotate(0deg); }
    to   { transform: translateX(1000px) rotate(360deg); }
}

.fadeOut {
    animation: fadeOut 4s;
    animation-delay: 1s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards; 
}

@keyframes fadeOut {
    from { opacity: 1; } 
    to   { opacity: 0; }
}

但我无法让它发挥作用。任何帮助将不胜感激。

（＆＃34;正确的＆＃34;页面将有相当复杂的动画集，因此addClass / removeClass方法可能会更好。

非常感谢

Answer 1

你的＆＃34;前锋＆＃34;按钮ID不正确。您将其设为#forwards，但实际上是#button。

我不确定$('#ball2').moving()应该做什么。你没有包含那个片段。

使用你的第一个例子：

＆＃13;

$(function() {
$("#button").click(function(){
    $('#ball').fadeOut(function(){
        $('#ball2').moving();
        });
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="css/move.css" rel="stylesheet" type="text/css">
</head>

<body>

<section class="container">
    <figure id="ball">ball text</figure>
    <figure id="ball2">ball2 text</figure>
   </section>

<section class="controls">
        <button class="button" id="button">Forwards</button>
    </section>
</body>   
</html>

＆＃13;

链接多个元素的CSS动画

1 个答案: