jquery - jQuery 的多个动画

Question

我找到了很多关于 jQuery 动画的文档，但找不到我可以使用的内容。

我想做的是: 1.鹰和形态同时上升，速度相同(现在效果很好)。这只会在有人填写表格并点击发送后发生。 这个动画效果很好，但在有人填写表格并点击发送后就不行了。我相信我需要添加一个 preventDefault();，但不知道该把它放在哪里。 2. 当它们向上移动时，会应用滤镜效果，这会改变老鹰、顶部窗帘和背景图像的颜色。这个滤镜效果是在CSS中设置的。我试图将我的 css 代码保留在我的 css 中，而我的 jQuery 则尽可能远离它。 3. 然后鹰和形态下降回到原来的位置。

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

期待建议。 在此处查看实时网站: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

干杯