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:
JavaScript
x
33
33
1
<!DOCTYPE html>2
<html lang="en">3
<head>4
<meta charset="UTF-8" />5
<meta name="viewport" content="width=device-width, initial-scale=1.0" />6
<title>Document</title>7
8
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>9
10
<script>11
12
$(".show").click(function () {13
$(".error-box").animate({14
transform: "translateX(0%)",15
}, 500);16
});17
</script>18
19
<style>20
.error-box {21
transform: translateX(-100%);22
}23
</style>24
</head>25
<body>26
<div class="error-box">27
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore,28
excepturi?29
</div>30
<button class="show">Göster</button>31
</body>32
</html>33
Advertisement
Answer
I suggest using animation by adding a class with rule transform: translateX(0%). Like that:
JavaScript
1
2
1
$(".error-box").addClass('animate');2
Add animation delay transition: .5s to .error-box and add this class to your css:
JavaScript
1
4
1
.error-box.animate {2
transform: translateX(0%);3
}4
As a result, you will get the desired result.
JavaScript
1
3
1
$(".show").click(function () {2
$(".error-box").addClass('animate');3
});JavaScript
1
8
1
.error-box {2
transform: translateX(-100%);3
transition: .5s;4
}5
6
.error-box.animate {7
transform: translateX(0%);8
}JavaScript
1
6
1
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>2
3
<div class="error-box">4
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, excepturi?5
</div>6
<button class="show">Göster</button>