HTML / CSS动画-JavaScript

Question

I've been trying to animate a sliding door that is triggered on the click of a button.

Here is my fiddle

I've got two sides of the sliding door. Left side is blue, right side is red. The left side should slide to the left and the right door should slide to the right.

First of all, I'm trying to position the button to the middle of the door. I'm using

#button {
  z-index: 2;
  position: absolute;
  top: 50%;
  left: 50%;
}

but still the button appears kind of sideways

But secondly when the button is clicked, both sides of the door should slide out at the same time, but unfortunately only the red door functions correctly.

The blue door is stuck. What am I doing wrong?

Answer 1

Defining same vars causing issues and for the left door you need to decrease value _pos--

Solution for button

left: calc(50% - 38px);

 #container { width: 810px; } #button { z-index: 2; position: absolute; top: 50%; left: 50%; } #wrapper { z-index: 1; position: absolute; display: inline-block; width: 810px; } #left { display: inline-block; width: 400px; } #right { display: inline-block; width: 400px; } #myContainer { width: 400px; height: 300px; position: relative; background: yellow; } #myAnimationLeft { width: 400px; height: 300px; position: absolute; background-color: blue; } #myAnimationRight { width: 400px; height: 300px; position: absolute; background-color: red; } 

 <div id="container"> <div id="button"> <button onclick="myMove()">Click Me</button> </div> <div id="wrapper"> <div id="left"> <div id="myContainer"> <div id="myAnimationLeft"></div> </div> </div> <div id="right"> <div id="myContainer"> <div id="myAnimationRight"></div> </div> </div> </div> </div> <script> function myMove() { var _elem = document.getElementById("myAnimationLeft"); var _pos = 0; var _id = setInterval(_frame, 5); function _frame() { if (_pos == 410) { clearInterval(_id); } else { _pos--; _elem.style.right = _pos + 'px'; _elem.style.left = _pos + 'px'; } } var elem = document.getElementById("myAnimationRight"); var pos = 0; var id = setInterval(frame, 5); function frame() { if (pos == 410) { clearInterval(id); } else { pos++; elem.style.left = pos + 'px'; elem.style.right = pos + 'px'; } } } </script> 

---

JQuery Solution created on @shubhamagrawal's answer.

 $(document).ready(function() { $('button').click(function() { $("#myAnimationLeft").offset({ left: 0 }) $("#myAnimationRight").offset({ left: $("#myAnimationRight").width() }) $("#myAnimationLeft").animate({ left: -$("#myAnimationLeft").width() }, 2000); $("#myAnimationRight").animate({ left: $("#myAnimationRight").width() }, 2000); }) }) 

 body, html { margin: 0; padding: 0; } #container { width: 810px; position:relative; overflow:hidden; height:300px; } #button { z-index: 2; position: absolute; top: calc(50% - 11px); left: calc(50% - 34px); } #wrapper { z-index: 1; position: absolute; display: inline-block; width: 810px; } #left { display: inline-block; width: 400px; } #right { display: inline-block; width: 400px; } #myContainer { width: 400px; height: 300px; position: relative; background: yellow; } #myAnimationLeft { width: 400px; height: 300px; position: absolute; background-color: blue; } #myAnimationRight { width: 400px; height: 300px; position: absolute; background-color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="container"> <div id="button"> <button>Click Me</button> </div> <div id="wrapper"> <div id="left"> <div id="myContainer"> <div id="myAnimationLeft"></div> </div> </div> <div id="right"> <div id="myContainer"> <div id="myAnimationRight"></div> </div> </div> </div> </div> 

Answer 2

You can use simple JQuery animation to do what you require.

FIDDLE

Here is the code:

 $("button").click(function() { $(".one").animate({ left: '0' }); $(".three").animate({ left: '200px' }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="one" style="background:#98bf21;height:100px;width:100px;position:absolute;left:100px;"></div> <div class="two" style="background:blue;height:100px;width:100px;position:absolute;left:100px;"> </div> <div class="three" style="background:red;height:100px;width:100px;position:absolute;left:100px;"></div> <button style="position:absolute;left:110px;top:50px;"> CLICK ME </button> 

Answer 3

You need to minus half the button width and height to bring it to the center.
If button's width is fixed, its correct to use calc(50% - 50px) as Icewine's answer.

For elements with dynamic widths and heights u can always use:

position: absolute; 
top: 50%; 
left: 50%;
transform:translateX(-50%) translateY(-50%);

The above code will center the element even if you dont know the height and width of the element.

Example:

 body { padding: 0px; margin: 0px; } div { width: 100px; height: 100px; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); background: red; } 

 <div></div> 

As for animation, why not use classes and let the CSS handle the animation?

 function myMove() { document.getElementById("myAnimationLeft").className = "DoorOpenLeft"; document.getElementById("myAnimationRight").className = "DoorOpenRight"; } 

 * { box-sizing: border-box; } body { margin: 0px; } #container { width: 100%; } #button { z-index: 2; position: absolute; top: 50%; left: 50%; display: inline-block; transform: translateX(-50%) translateY(-50%); } #wrapper { z-index: 1; position: absolute; width: 100%; overflow-x: hidden; clear: both; } #left { display: inline-block; width: 50%; float: left; } #right { display: inline-block; width: 50%; float: right; } #myContainer { width: 100%; height: 300px; position: relative; background: yellow; } #myAnimationLeft { width: 100%; height: 300px; left: 0px; position: absolute; background-color: blue; transition: all 1s ease; } #myAnimationRight { width: 100%; height: 300px; left: auto; right: 0px; position: absolute; background-color: red; transition: all 1s ease; } .DoorOpenLeft { left: -100% !important; } .DoorOpenRight { right: -100% !important; } 

 <div id="container"> <div id="button"> <button onclick="myMove()">Click Me</button> </div> <div id="wrapper"> <div id="left"> <div id="myContainer"> <div id="myAnimationLeft"></div> </div> </div> <div id="right"> <div id="myContainer"> <div id="myAnimationRight"></div> </div> </div> </div> </div> 

Answer 4

It should be like this

 function myMove() { var elem = document.getElementById("myAnimationRight"); var elem_l = document.getElementById("myAnimationLeft"); var elem_R = document.getElementById("myAnimationRight"); elem_l.className += " opened"; elem_R.className += " opened"; } 

 #container { width: 800px; } #button { z-index: 2; position: absolute; top: 50%; left: 50%; } #wrapper { z-index: 1; position: absolute; display:inline-block; width: 810px; overflow:hidden; } #left { display:inline-block; width: 400px; } #right { display:inline-block; width: 400px; } #myContainer { width: 400px; height: 300px; position: relative; background: yellow; } #myAnimationLeft { width: 400px; height: 300px; position: absolute; background-color: blue; transition:linear all 0.5s; left:0; } #myAnimationRight { width: 400px; height: 300px; position: absolute; background-color: red; transition:linear all 0.5s; right:0; } #myAnimationRight.opened{ right:-100%; transition:linear all 0.5s; } #myAnimationLeft.opened{ left:-100%; transition:linear all 0.5s; } 

 <div id="container"> <div id ="button"> <button onclick="myMove()">Click Me</button> </div> <div id="wrapper"> <div id ="left"> <div id ="myContainer"> <div id ="myAnimationLeft"></div> </div> </div> <div id ="right"> <div id ="myContainer"> <div id ="myAnimationRight"></div> </div> </div> </div> </div> 

You can handle animation via CSS and just add class opened to elements on button click.

Answer 5

For the button, you need to minus the width and height of the button to center it. left: calc(50% - 50px); if button width is 100px;

Also, you need to set the parent div above button to position: relative; or the absolute wont work. You should also set a height of the parent div while you are at it.