?
Solved

FadeIn and FadeOut with jQuery

Posted on 2012-09-04
12
Medium Priority
?
1,022 Views
Last Modified: 2012-09-10
I am having some trouble fading in and out my Submit button. The animation works as I want but with a minor issue.

When I enter in the form info, on my contact page, and hit Submit, the Submit button fades out and the success message fades in. This is correct except the fades on the Submit button doesn't seem to finish fading before display is set to none. It animates close to the end and then disappears before it finishes. This makes the animation look jerky.
I want the animation to be smooth all the way to the end.

Here is my site: www.skurat.com
Submit an email form and you will see what I am talking about.

Any help would be great.

Thanks,
Tony
0
Comment
Question by:askurat1
  • 7
  • 5
12 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 38365948
Where is the fadeout code rather than searching for it..?
I suspect you probably just need to cover it with a function

$('submitid').fadeOut('slow', function() {
    // add code to fade in success

});
0
 
LVL 8

Author Comment

by:askurat1
ID: 38366143
Here is the code:
var getName = $('#name').val(),
			    message = '<h5>Thanks, <b>' + getName + '</b>!</h5><h5>Your message has been sent.</h5>'			
			
            $('#submit, .sending').fadeOut(1600);

            $('.mess').delay(4000).html(message).fadeIn('fast', function () {
			   $('#form').clearForm();
			   $(this).delay(5000).fadeOut('slow', function() {         
                $('#submit').fadeIn('slow');
            });	
			});

Open in new window


I have already tried what you said and it doesn't seem to work.
This code can be found in custom.js.
0
 
LVL 58

Expert Comment

by:Gary
ID: 38366190
Should the success be fading in as the submit fades out or waiting til the submit button is completely faded out?
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 8

Author Comment

by:askurat1
ID: 38366208
It doesn't really matter. I just want the button to fade correctly.
0
 
LVL 58

Assisted Solution

by:Gary
Gary earned 1000 total points
ID: 38366214
http://jsfiddle.net/v7JB8/6/

The click event runs the function to fade out the Submit then fires the fade in.
Let me know if you need help adapting it.
0
 
LVL 8

Author Comment

by:askurat1
ID: 38366246
Not sure how this is different from what I have.
0
 
LVL 8

Author Comment

by:askurat1
ID: 38366262
Updated:
$('#submit, .sending').fadeOut('slow', function (){
				$('.mess').delay(1000).html(message).fadeIn('fast', function () {
			   $('#form').clearForm();
			   $(this).delay(5000).fadeOut('slow', function() {         
                $('#submit').fadeIn('slow');
            });	
			});				
			});

Open in new window


Still does the same thing.
0
 
LVL 58

Expert Comment

by:Gary
ID: 38366275
I don't have time right now to rewrite your code but you need to encapsulate the order of things so they run after each other.
So in your ajax call set the sending to show, on successful call back hide the submit/sending and show the success message or an error message
0
 
LVL 8

Author Comment

by:askurat1
ID: 38366303
I'm still not understanding. To simplify things I have removed sending from showing.
$('#submit').fadeOut('slow', function (){
		$('.mess').delay(1000).html(message).fadeIn('fast', function () {
			   $('#form').clearForm();
			   $(this).delay(5000).fadeOut('slow', function() {         
                                   $('#submit').fadeIn('slow');
                           });	
		  });				
});

Open in new window


I'm not sure what I'm doing wrong.

Thanks for the help.
0
 
LVL 58

Expert Comment

by:Gary
ID: 38368228
Does this work for you
http://jsfiddle.net/v7JB8/26/
0
 
LVL 8

Accepted Solution

by:
askurat1 earned 0 total points
ID: 38368599
Thanks for the help but I did figure out the problem.

It was in my css for the Submit button:
-webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease;

Open in new window


As soon as I removed the transitions it worked. I still wanted the transitions so I have the whole contact form fading out instead of just the Submit button.

Thanks for the help.
0
 
LVL 8

Author Closing Comment

by:askurat1
ID: 38382320
I found the solution.
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question