Hi I need an animation that makes a div go from left to center, but it doesn't work. This is my code:
$(document).ready(function () {
$(log).click(function () {
var number = $(window).width() / 2;
$(registrationDiv).animate({ left: number }, 200);
$(registrationDiv).show();
$(loginDiv).hide();
});
});
this code puts the div slightly to the right and not at center.
There are at least a few ways you could achieve this (pure Javascript or jQuery, vanilla CSS with either transitions or CSS animations, an animation library, or a combination of some or all of these) but I would suggest using jQuery/Javascript to catch the click event and adding a class with transitioning styles to your element like so:
HTML
<div class="box"></div>
CSS
.box {
height: 50px;
width: 50px;
background: black;
position: fixed; // position the box relative to the viewport
left: -25px; // hide the box by moving it over 50%. the other 50% is moved with translateX()
top: 0;
transform: translateX(-50%); // needed to align the center of the box with the center of the window
}
.box.animate {
left: 50%; // position the box in the middle of the viewport
transition: left 1000ms; // animate the 'left' CSS property with a duration of 1000 milliseconds
}
jQuery
(function ($) {
$(document).ready(function () {
$(window).click(function () {
const box = $(".box");
box.addClass('animate')
});
});
})(jQuery);
Vanilla Javascript (alternative to using jQuery)
window.addEventListener('DOMContentLoaded', () => {
document.querySelector('.box').addEventListener('click', function(e) {
e.target.classList.add('animate')
})
});
The div position is relative to the top left of a div (box). As such your registrationDiv (0,0) point is exactly at the centre of the screen.
Remove half the width of your target div from the number
$(document).ready(function () {
$(log).click(function () {
let halfChildWidth = $(registrationDiv).width() * .5
var number = $(window).width() / 2;
$(registrationDiv).animate({ left: number - halfChildWidth}, 200);
$(registrationDiv).show();
$(loginDiv).hide();
});
});