Clicky

Having an issue with this, I'm trying to add a fade out page transition.

I know how to do it with normal href links but I would also like to apply the transition for when the user submits a form (and making sure the form data is still posted properly):

This works for links with the JQuery library present on the webpage:
 $(document).ready(function() { 	 	$("a").click(function(event){ 		event.preventDefault(); 		linkLocation = this.href; 		$("body").fadeOut(1000, redirectPage);		 	}); 		 	function redirectPage() { 		window.location = linkLocation; 	} 	 });                             
1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: 12: 13: 

Select allOpen in new window




What would I add to make this compatible with forms?

Thanks!

asked 12/15/2011 01:18

sky_revolution's gravatar image

sky_revolution ♦♦


7 Answers:
haven't tested this at all, but instead of
window.location = linkLocation

can't you just use
document.getElementById('SubmitButton').submit();

?
link

answered

nap0leon's gravatar image

nap0leon

1:
2:
3:
$("form").submit(function(event){
                $("body").fadeOut(1000);
        });
link

answered 2011-12-15 at 09:40:35

StingRaY's gravatar image

StingRaY

Hi StingRaY,

The only issue with your solution is that it doesn't delay the new page from loading until the transition is complete.

It need something with like event.preventDefault(); and as well as something to trigger the form submit after the transition effect.
link

answered 2011-12-15 at 09:41:34

sky_revolution's gravatar image

sky_revolution

I see.

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
var transitioned = false;
$(document).ready(function() {
var transitioned = false;
$(document).ready(function() {
        $("form").submit(function(){
                if (transitioned) {
                     return true;
                } else {
                     $("body").fadeOut(1000, function() {
                            transitioned = true;
                            $("form").submit();
                     });
	             return false;
                }
        });
});
});
link

answered 2011-12-15 at 09:47:50

StingRaY's gravatar image

StingRaY

Oops! The previous post has a repeated part. Try this:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
var transitioned = false;
$(document).ready(function() {
        $("form").submit(function(){
                if (transitioned) {
                     return true;
                } else {
                     $("body").fadeOut(1000, function() {
                            transitioned = true;
                            $("form").submit();
                     });
					 return false;
                }
        });
});
link

answered 2011-12-15 at 09:54:36

StingRaY's gravatar image

StingRaY

The method is straightforward. Using a variable named "transitioned" is the key.
Once the page is faded out, set it true and resubmit.
link

answered 2011-12-15 at 09:55:21

StingRaY's gravatar image

StingRaY

Works perfect, thanks!
link

answered 2011-12-15 at 09:56:39

sky_revolution's gravatar image

sky_revolution

Your answer
[hide preview]

Follow this question

By Email:

Once you sign in you will be able to subscribe for any updates here

By RSS:

Answers

Answers and Comments

Tags:

×11
×125
×63
×1

Asked: 12/15/2011 01:18

Seen: 277 times

Last updated: 12/15/2011 02:00