使用jQuery的多个动画

Question

我发现了大量有关jQuery动画的文档，但却无法找到我可以使用的内容。

我要做的是以下内容： 1.鹰和形状同时以相同的速度上升（现在效果很好）。这只发生在有人填写表格并点击发送后。 这个动画工作正常，但没有人填写表格并点击发送。我相信我需要添加preventDefault();，但不知道在哪里准确地说出来。 2.当它们被动画化时，应用滤镜效果，这会改变鹰，顶部窗帘和背景图像的颜色。此滤镜效果在CSS中设置。我试图尽可能地将我的css代码保存在我的css和我的jQuery中。 然后鹰和表格下降到原来的位置。

我相信我必须为这样的事情使用队列，并且不知道如何使用它们。所以也许有人也可以提供一些关于队列的信息。

期待建议。 在这里查看实时网站：http://demo.chilipress.com/epic3/ 请参阅图片，了解在提交表单后页面的外观：

HTML

<img class="bg_green bg_blue" src="assets/contact_background.jpg">
<div class="curtain_green curtain_blue "></div>
<div class="eagle_green eagle_blue"></div>
<div id="content">
 <div class="contact">
  <form>
   <fieldset class="name">
    <label for="name" class="name group">Name</label>
    <input type="name" id="name" name="name" required pattern="[A-Za-z-0-9]+\s[A-Za-z]+"  title="firstname lastname"/>
   </fieldset>
   <fieldset class="send">
    <input type="submit" value="Send" class="sendButton">
   </fieldset>
  </form>
 </div>
</div> 

CSS

img.bg_blue{
display: none;
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' ><filter   id=\'huerotate\'><feColorMatrix type=\'hueRotate\' values=\'46\' /></filter></svg>#huerotate");
-webkit-filter: hue-rotate(46deg); /* Chrome 19+, Safari 6+, Safari 6+ iOS */}  

img.bg_green {
/* Set rules to fill background */
height: 100%;
min-width: 240px;

/* Set up proportionate scaling */
width: 100%;

/* Set up positioning */
position: fixed;
top: 0;
left: 0;
display: block;
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' ><filter id=\'huerotate\'><feColorMatrix type=\'hueRotate\' values=\'0\' /></filter></svg>#huerotate");
-webkit-filter: hue-rotate(0deg); /* Chrome 19+, Safari 6+, Safari 6+ iOS */}

.curtain_blue{
display: none;
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' ><filter id=\'huerotate\'><feColorMatrix type=\'hueRotate\' values=\'46\' /></filter></svg>#huerotate");
-webkit-filter: hue-rotate(46deg); /* Chrome 19+, Safari 6+, Safari 6+ iOS */}

.curtain_green{
background-image: url('spriteContact.png');
width: 35.1%;
height: 0;
padding-bottom: 7%;
background-position: 0 0;
background-size: 100%;
display: block;
top: 0;
position: absolute;
margin: 0 0 0 32.1%;
z-index: 2;
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' ><filter id=\'huerotate\'><feColorMatrix type=\'hueRotate\' values=\'0\' /></filter></svg>#huerotate");
-webkit-filter: hue-rotate(0deg); /* Chrome 19+, Safari 6+, Safari 6+ iOS */}

.eagle_blue{
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' ><filter id=\'huerotate\'><feColorMatrix type=\'hueRotate\' values=\'46\' /></filter></svg>#huerotate");
-webkit-filter: hue-rotate(46deg); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
display: none;}

.eagle_green{
background-image: url('spriteContact.png');
width: 27.5%;
height: 0;
padding-bottom: 31.6%;
background-position: 0 27%;
background-size: 100%;
display: block;
top: 0;
position: absolute;
margin: -2% 0 0 35.8%;
z-index: 1;
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' ><filter id=\'huerotate\'><feColorMatrix type=\'hueRotate\' values=\'0\' /></filter></svg>#huerotate");
-webkit-filter: hue-rotate(0deg); /* Chrome 19+, Safari 6+, Safari 6+ iOS */}

的jQuery

$(document).ready(function(){
$('input[value="Send"').on("click", function(e) {
$(".eagle_green").animate({"top": "-130px"}, 2200);
$("#content").animate({"top": "-120px"}, 2200);

});
});

Answer 1

这个例子中发生的事情是你的表单提交在某个时刻打破了动画，动画永远不会到达终点。

尝试在此类动画的回调中添加表单提交

    $("#content").animate({"top": "-120px"}, 2200, function() {
        $('form').submit();
    });

此外，您可以在此页面上查看链接jQuery动画（我相信您在提到队列时的意思） https://forum.jquery.com/topic/chaining-animations

干杯