Multiple animations with jQuery

Question

I've found a lot of documentation on animations regarding jQuery, but yet can't find something I can work with.

What I am trying to do is the following: 1.The Eagle and the form go up at the same time and with the same speed (which works well now). This only happens AFTER someone has filled in the form and clicks on Send. This animation is working fine but not after someone has filled in the form and clicks on send. I believe I need to add a preventDefault();, don't know where to put it exactly though. 2. When they are animated up, a filter effect get's applied, which changes the color of the eagle, top curtains and the background image. This filter effect is set in CSS. I am trying to keep my css code inside my css and my jQuery apart from it as much as possible. 3. Then the Eagle and the form come down gain to their original position.

I believe I have to use queues for something like this and have no idea how to use them. So maybe someone could also provide me some info about queues as well.

Looking forward to suggestions. See live website here: http://demo.chilipress.com/epic3/ See the image for how the page looks like AFTER the form is submitted: enter image description here

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);

});
});

When someone sends the form, the page reloads, and the javascript is lost. Using preventDefault would prevent the form from submitting, is that what you want ? — adeneo, Apr 05 '14 at 14:39
I want the form to get submitted after step 2. So right before the eagle and the curtain come down, I want the form to be submitted. Is that possible? — , Apr 05 '14 at 14:53
Where does it exactly go? `$('input[value]="Send"')` Is the above correct? Sorry only been working with jQuery for a month now. — , Apr 05 '14 at 15:22
It should look like this -> http://jsfiddle.net/adeneo/6H52W/ — adeneo, Apr 05 '14 at 15:36
@adeneo, that is exactly what I meant. Thanks for that. The only issue here is when the form is submitted, the page refreshes and the form is shown at it's original place. but I want the form to be submitted AND the page not to be refreshed. Is that possible? Why do I want this? Because I have more animations I want to add. E.g. The eagle, the curtain and the background all have filter settings in the css which are all on `display:none;`. So I want to apply these animations too and have the colours change of these images after the first animations (where everything goes up). — , Apr 05 '14 at 15:50
The only way to submit a form without reloading the page is to submit the form with ajax. — adeneo, Apr 05 '14 at 16:00
I haven't practised with Ajax yet. Could you help me out with it? Not just provide the code, but also explain the reasoning behind it? The submitting takes place when the form is up there. And after that the form and eagle take it down again. Thanks in advance. — , Apr 05 '14 at 16:06
@adeneo Why is this not working: `$(document).ready(function () { $('form').on("submit", function (e) { // give the form an ID instead e.preventDefault(); $(".eagle_green").animate({ "top": "-130px" }, 2200); $("#content").animate({ "top": "-120px" }, 2200, function() { $(this).submit(); }); }); });` And why is your code working? What is the difference? — , Apr 05 '14 at 16:15
`$(this).submit()` won't work. `this` is not the form, and doing `$(this).submit()` triggers the jQuery event handler that's currently preventing the form from submitting, it has to be `this.submit()`, but again, inside the callback function `this` is not the form. Look at my Fiddle above, the form is stored in a variable, `self`, for this reason. — adeneo, Apr 05 '14 at 16:38

score 0 · Answer 1 · answered Apr 05 '14 at 15:25

0

What happends in this example is that your form submit is breaking animation at some point and animation never reaches the end.

Try adding form submit in callback of animation like this


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

Also you might check chaining jQuery animations (which i believe you meant when you mentioned queues) on this page https://forum.jquery.com/topic/chaining-animations

Cheers

answered Apr 05 '14 at 15:25

Kukic Vladimir

1,010
4
15
22

Thanks however my first priority is to have the page not refreshed after someone clicks on 'SEND' (so obviously this is done with ` $('input[value="Send"').on("click", function(e) { e.preventDefault();`) However, still when someone clicks on the "SEND" button the animations start working without the page refreshing. What I want is that the form first get's fully filled in AND THEN when someone clicks on "SEND" the animations start working. The animations must not work when someone clicks on "SEND" on an empty form. Please help. PS: thx for sharing the link, will check it out now. – Apr 05 '14 at 15:35
And I already had the code for manually submitting the form: `$('form').submit();`. I want to apply more animations after the form is submitted. But I don't want the page refreshed. It messes up the rest of animations that are about to follow. -Hope it makes sense- – Apr 05 '14 at 15:38
well, you can simply check the value of all input fields and prevent animation if all fields are not filled. Here is sample code if ($("#name").val() == "") { alert("provide name") } else { $(".eagle_green").animate({"top": "-130px"}, 2200); $("#content").animate({"top": "-120px"}, 2200, function() { $('form').submit(); }); } Also why don't you perform all animations and then simply submit the form?! You will get the same effect – Kukic Vladimir Apr 05 '14 at 15:46
Thanks for your code. I believe @adeneo has more clean code which I will use. And about your last question. The form will look different after it has submitted the information. I will make a print screen of it and will show it in my original question. The form will say something like: Thank you for submitting the form. So all the input fields will not be there expect for that piece of text. So I believe I should make a new form lay-out and put that on `display:none;` and show it with jQuery AFTER the form is submitted. – Apr 05 '14 at 15:56
There is only one catch! I want the form to show this text when it is stil hanging up there and then it starts to come down. So it get's submitted when it is up there and then there are animations which will make the form come down. That's why I want the form to be submitted without the page to be refreshed,, if that is possible? – Apr 05 '14 at 15:57
1

I believe that you want to achive something like this http://stackoverflow.com/questions/1263852/prevent-form-redirect-or-refresh-on-submit Hope this solves your problem – Kukic Vladimir Apr 05 '14 at 16:01
Interesting link. Going through it now. The Answer that got the most credit is: `$('#contactForm').submit(function () { sendContactForm(); return false; });` What happens when I have it `return false`? And if it is NOT sending the form,, then when does it send the form? – Apr 05 '14 at 16:12
in sendContactForm you can add something like
```
document.form.submit();
```
after all animations are done. check this example as well http://stackoverflow.com/questions/18480001/on-submit-form-return-false-not-working
– Kukic Vladimir Apr 05 '14 at 16:23
Nowhere did I see `
```
document.form.submit();
```
` in the link you provided. And the code in the example is pretty advanced for me at this stage since it is in jS. I was hoping I could get it all done in jQuery.
– Apr 05 '14 at 16:31

Multiple animations with jQuery

1 Answers1