Hello! I need the help of knowledgeable people, my knowledge of JS is nearing zero, I already just broke my whole head)

The problem is as follows:

There are two blocks (div), one of them is initially hidden outside the screen.

When you press a button, the visible block flies to the right side of the screen, and the hidden flies to the left in its place.

There are no problems with the animation itself, and it is even possible to launch it by clicking on the button, but only once, pressing it again does not work (that is, you need to restart the animation each time).

But the main problem is how, when you click on another button, launch the same animation in the opposite direction? Those. so that the blocks rose to their original position.

For clarity, here you can see the result I achieved. Block "Fill out an application", just below the middle of the page, the button on the right in this block. Here is the code I used:

HTML:

<div class="zakaz-form switch-form">Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠΈΠΌΠΎΠ΅ 1-Π³ΠΎ Π±Π»ΠΎΠΊΠ° + 1-я ΠΊΠ½ΠΎΠΏΠΊΠ°</div> <div class="cons-form switch-form">Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠΈΠΌΠΎΠ΅ 2-Π³ΠΎ Π±Π»ΠΎΠΊΠ° + 2-я ΠΊΠ½ΠΎΠΏΠΊΠ°</div>

CSS animation:

 .zakaz-form{ animation: switch-zakaz forwards 3s; -webkit-animation-play-state:paused; animation-play-state:paused; } @keyframes switch-zakaz { 0% { opacity: 1; left: 0; } 20% { opacity: 1; left: 0; } 100% { opacity: 0; left: 95%; } } .cons-form{ animation: switch-cons forwards 3s; -webkit-animation-play-state:paused; animation-play-state:paused; } @keyframes switch-cons { 0% { opacity: 0; left: -1000px; } 80% { opacity: 1; left: calc(50% - 275px); } 100% { opacity: 1; left: calc(50% - 275px); } } .start-anim { -webkit-animation-play-state:running; animation-play-state:running; }

JS - start the animation by clicking on the button:

 jQuery(document).ready(function($){ $(function(){ $('.cons-button').click(function(){ $('.switch-form').toggleClass('start-anim'); }); }); });

Thank you in advance for any help!

UPD: [An example of an incomplete solution] - when you click on the "Show the first block" button, you need the animation to run in the opposite direction.

  • Issue the code normally, so that you can see it here, and not on your website, then they will help - lazyproger
  • And why did I complicate things like that) added, thanks for the advice - REDiRECT

1 answer 1

It is not necessary to use animation where you can do a simple transformation.

 jQuery(document).ready(function($) { $(function() { $('.btn').click(function() { $('.switch-form').toggleClass('start-anim'); }); }); }); 
 button { display: block; margin: 80px auto; } .zakaz-form { opacity: 0; position: absolute; top: 0; left: calc(50% - 100px); width: 200px; height: 200px; background: #49c766; transform: translateX(-250%); transition: all .5s; } .cons-form { opacity: 0; position: absolute; top: 0; left: calc(50% - 100px); width: 200px; height: 200px; background: #f03e53; transform: translateX(250%); transition: all .5s; } .start-anim { opacity: 1; transform: translateX(0); } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="zakaz-form switch-form"><button class="btn cons-button">ΠŸΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ Π²Ρ‚ΠΎΡ€ΠΎΠΉ Π±Π»ΠΎΠΊ</button></div> <div class="cons-form switch-form start-anim"><button class="btn zakaz-button">ΠŸΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ Π±Π»ΠΎΠΊ</button></div>

  • I had suspicions that I had gone in a completely wrong way) Thank you so much for pointing out the error and suggesting a solution, this is what you need! - REDiRECT
  • Or maybe you can help me again? I need a little more refinement, I'm in js, well, quite a tree) There are two more buttons, in a completely different place. You can make it so that when you click on one, the first of these blocks appears, and when you click on the second, the second one, but at the same time, repeated presses do not change their places?) At the same time, you need to combine everything with your solution - REDiRECT
  • I was glad to help ... Then accept the answer ... This is a gray tick to the left of the answer - Air
  • minute)))))))) ... - Air
  • I hope I explained it is available) is easier - on the top of the page there are two anchor links with buttons, each of which transfers to this block), but it is necessary that the corresponding one be displayed - REDiRECT