|
Сообщение от jurvrn
|
|
а его надо изначально скрыть.
|
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#toggle {
position: absolute;
width: 0px;
height: 100px;
background: #ccc;
left: 100%;
overflow: hidden;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function() {
let direction = 1;
$(document).click(function() {
direction ^= 1;
let options = direction ? {
width: "-=100px",
left: "+=100px"
} : {
width: "+=100px",
left: "-=100px"
}
$("#toggle").stop().animate(
options, {
duration: 1200,
complete: function() {
this.style.left = direction ? "" : "calc(100% - 100px)";
}
});
});
});
</script>
</head>
<body>
<p>Click anywhere to toggle the box.</p>
<div id="toggle">toggle slideRight</div>
</body>
</html>