Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- $('#one').click( function() {
- $("body").addClass("move");
- });
- $('#back').click( function() {
- $("body").removeClass("move");
- });
- <ul>
- <li id="one">One</li>
- <li id="two">Two</li>
- <li id="three">Three</li>
- </ul>
- <a id="back">Back</a>
- ul {
- width: 300px;
- height: 150px;
- margin: 0;
- padding: 0;
- list-style: none;
- position: absolute;
- bottom: 0;
- right: 0;
- }
- ul li {
- height: 50px;
- display: block;
- margin: 0;
- padding: 0;
- background: lightgreen;
- transition: 500ms transform ease-in-out, 500ms opacity linear;
- opacity: 1;
- transition-delay: 0, 500ms;
- }
- body.move ul li#one {
- transform: translateY(-100vh) translateY(150px);
- transition: 500ms transform ease-in-out;
- transition-delay: 500ms;
- opacity: 1;
- }
- body.move ul li {
- opacity: 0;
- transition: 500ms opacity linear;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement