So when i try to use Jquery animate
function it does’t work at all. I tried every-single thing and still doesn’t work. Here is the HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(".show").click(function () { $(".error-box").animate({ transform: "translateX(0%)", }, 500); }); </script> <style> .error-box { transform: translateX(-100%); } </style> </head> <body> <div class="error-box"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, excepturi? </div> <button class="show">Göster</button> </body> </html>
Advertisement
Answer
I suggest using animation by adding a class with rule transform: translateX(0%)
. Like that:
$(".error-box").addClass('animate');
Add animation delay transition: .5s
to .error-box
and add this class to your css:
.error-box.animate { transform: translateX(0%); }
As a result, you will get the desired result.
$(".show").click(function () { $(".error-box").addClass('animate'); });
.error-box { transform: translateX(-100%); transition: .5s; } .error-box.animate { transform: translateX(0%); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <div class="error-box"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, excepturi? </div> <button class="show">Göster</button>