By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,985 Members | 1,777 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,985 IT Pros & Developers. It's quick & easy.

Firing jQuery function to run at same time as a CSS3 animation

P: 97
I'm trying to make a page transition and I've got a CSS3 animation that works well enough. This one:

Expand|Select|Wrap|Line Numbers
  1. @keyframes myfadeInAnimation {
  2. from { -webkit-transform: translateY(1000px); transform: translateY(1000px); }
  3. to { -webkit-transform: translateY(10px); transform: translateY(10px); }
  4. }
  5.  
  6. section{
  7. -webkit-animation: myfadeInAnimation .9s ease-in-out both;
  8. animation: myfadeInAnimation .9s ease-in-out both;
  9. }
  10.  
But it makes the current page disappear before the animation runs, so I'm trying to make a little jQuery function to make the current page fade out, so that it will appear to remain there until the new page slides in.

This jQuery function isn't doing anything:

Expand|Select|Wrap|Line Numbers
  1. $(window).unload(function() {
  2.     event.preventDefault();
  3.     linkLocation = this.href;
  4.     $("section").fadeOut(4000, redirectPage);      
  5.  
  6.     function redirectPage() {
  7.         window.location = linkLocation;
  8.     }
  9. });
  10.  
Do I need ajax, or something?
Nov 4 '15 #1

✓ answered by tdrsam

The solution I found for this was to use a plugin instead of making a custom function.

Share this Question
Share on Google+
1 Reply


P: 97
The solution I found for this was to use a plugin instead of making a custom function.
Nov 5 '15 #2

Post your reply

Sign in to post your reply or Sign up for a free account.