How to make an element reset its position after mouseout event in javascript

Question

trying to make a button like this: https://gyazo.com/9afbd559c15bb707a2d1b24ac790cf7a . The problem with the code right now is that it works as it is supposed to on the first time; but after that, instead of going from left to right as intented, it goes from right to left to right.

HTML

<div class="btn-slide block relative mx-auto" style="overflow: hidden; width: 12rem;">
    <span class="z-10">View Pricing</span>
    <span class="slide-bg block absolute transition" style="background-color: rgba(0,0,0,.1); z-index: -1; top: 0; left:-10rem; width: 10rem; height: 3rem;"></span>
</div>

Javascript

const btns = document.querySelectorAll(".btn-slide");
const slide = document.getElementsByClassName('slide-bg');
btns.forEach(function(btn) {
    btn.addEventListener('mouseout', function () {
        slide[0].style.transform = 'translateX(230%)';
            slide[0].style.transform = 'none';
    })
    btn.addEventListener('mouseover', function() {
        slide[0].style.transform = 'translateX(80%)';
    }, true)
})

Answer 1

Unless you have to compute a value in JavaScript (like the height of an element). Use CSS classes as modifiers (is-hidden, is-folded, is-collapsed, ...). Using JavaScript, only add/remove/toggle the class

yourElement.addEventListener(
    "mouseenter",
    function (event)
    {
        yourElement.classList.remove("is-collapsed");
    }
);
yourElement.addEventListener(
    "mouseleave",
    function (event)
    {
        yourElement.classList.add("is-collapsed");
    }
);

is-collapsed is only an exemple, name it according to your class naming standard.

Answer 2

You're probably going to need a bit more code than what you're showing, as you have two mutually exclusive CSS things you want to do: transition that background across the "button" on mouseenter/mouseout, which is animated, and then reset the background to its start position, which should absolutely not be animated. So you need to not just toggle the background, you also need to toggle whether or not to animation those changes.

 function setupAnimation(container) { const fg = container.querySelector('.label'); const bg = container.querySelector('.slide-bg'); const stop = evt => evt.stopPropagation(); // step one: make label text inert. This is critical. fg.addEventListener('mouseenter', stop); fg.addEventListener('mouseout', stop); // mouse enter: start the slide in animation container.addEventListener('mouseenter', evt => { bg.classList.add('animate'); bg.classList.add('slide-in'); }); // mouse out: start the slide-out animation container.addEventListener('mouseout', evt => { bg.classList.remove('slide-in'); bg.classList.add('slide-out'); }); // when the slide-out transition is done, // reset the CSS with animations _turned off_ bg.addEventListener('transitionend', evt => { if (bg.classList.contains('slide-out')) { bg.classList.remove('animate'); bg.classList.remove('slide-out'); } }); } setupAnimation(document.querySelector('.slide')); 

 .slide { position: relative; overflow: hidden; width: 12rem; height: 1.25rem; cursor: pointer; border: 1px solid black; text-align: center; } .slide span { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .slide-bg { background-color: rgba(0,0,0,.1); transform: translate(-100%, 0); transition: none; z-index: 0; } .slide-bg.animate { transition: transform 0.5s ease-in-out; } .slide-bg.slide-in { transform: translate(0%, 0); } .slide-bg.slide-out { transform: translate(100%, 0); } 

 <div class="slide"> <span class="label">View Pricing</span> <span class="slide-bg"></span> </div> 

And thanks to browsers being finicky with rapid succession mouseenter/mouseout events, depending on how fast you move the cursor this may not even be enough: you might very well still need a "step" tracker so that your JS knows which part of your total animation is currently active, and not trigger the mouseout code if, by the time the slide-in transition ends, the cursor is in fact (still) over the top container (or, again).

Answer 3

I advice you use the .on event listener

$('').on("mouseentre","elem",function(){$('').toggleclass('.classname')})
$('').on("mouseleave","elem",function(){$('').toggleclass('.classname')})

Then you can toggle css classes to your element in the function

toggle class adds the css of a class to your jquery selection, you can do it multiple times and have keyframes for animation in the css class

Keyframes are great way to implement animation and are supported on every browers