CSS3 combined with jQuery to achieve an example of animation effect and callback function

In the final item, the IDEA proposed by friends, welcomes the user’s effects when the user logs in, that is, the user information is rising from the bottom to the page, and then returns the bottom.

The problem he encountered is: From the bottom, you can come out to prompt information, but you will not go after it comes out.

After listening, consider it, think of using a callback function to solve this bug, then simulate the login successfully entered the home page (ie refresh page), pop up the welcome information and disappear, write a similar animation effect.

The code is as follows:


Welcome animation
* {margin: 0; padding: 0;} Div {Margin: 0 auto; width : 100%; Height: 700px; overflow: hidden; position: relative;} p {width: 220px; height: 40px; line-height: 40px; text-align: center; display: block; color: # 900; background: #CCC; Position: Absolute; Bottom: -40px; Left: 500px;}
  Welcome XXX login, I wish you a pleasant shopping     // Function entrance$ (Function () {show ();}; // animation function function show () {// Get the height var P = $ ("p") of the P box. Height (); $ (function () {/ / Animation function is $ ("p"). Animate ({"bottom": p * 9}, 3000, function () {// callback function is $ ("p"). Animate ({"bottom" :-p}, 6000);});});}     Here mainly uses the Animate animation attribute in CSS3, combined with jQuery to implement animation execution The time and direction, finally set the callback function to return the prompt to the initial position.   The above CSS3 combined with jQuery to achieve the animation effect and the callback function is the full content of Xiaobian sharing to everyone, I hope to give you a reference, I hope everyone supports Tumi Cloud. 

© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment