Having trouble with reversing an animation after unhovering

Issue

I’m in a bit of a pickle with this one. So I’m trying to reverse an animation after the element is unhovered (I have already the animation that when on hover plays and I just want to reverse it).

This is the keyframe

@keyframes appearbutton {
    0%{
        width:0px;
        height:0px;
    }
    50%{
        width:0px;
        height:30px;
    }
    100%{
        width:30px;
        height:30px;
    }
}

And using js I’m trying to check when I unhover the button using an eventlistener

window.load = Loaded();

function Loaded(){
    LoadImages();
    
    var searchitems = document.getElementById("siip");

    searchitems.addEventListener(onmouseleave, ReverseAnim());
}

function LoadImages(){ /// This works and is not a problem
    ...
}

function ReverseAnim(){
   console.log("Test");
}

But everytime the page loads the function is called and I see "Test" in console and when I unhover the button there isn’t even a second "Test" appearing.

Also this is my HTML, I check whenever the mouse is over the "siip" element and not the input but the animation is on the inputs inside the CSS.

<div id="searchbar">
     <div class="searchitems" id="siip">
          <img src="images/searchbutton.png">
          <input type="text" class="textcassette" id="txtcass">
          <input type="sumbit" class="submitbutton" id="subbutt">
     </div>
</div>

Solution

You were calling the function directly, you have to pass reference of the function and also you have to use mouseleave instead of onmouseleave and it should be in quotes

window.load = Loaded();

function Loaded(){
    LoadImages();
    
    var searchitems = document.getElementById("siip");

    searchitems.addEventListener('mouseleave', ReverseAnim);
}

function LoadImages(){ /// This works and is not a problem
    
}

function ReverseAnim(){
   console.log("Test");
}

@keyframes appearbutton {
    0%{
        width:0px;
        height:0px;
    }
    50%{
        width:0px;
        height:30px;
    }
    100%{
        width:30px;
        height:30px;
    }
}

<div id="searchbar">
     <div class="searchitems" id="siip">
          <img src="images/searchbutton.png">
          <input type="text" class="textcassette" id="txtcass">
          <input type="sumbit" class="submitbutton" id="subbutt">
     </div>
</div>

Answered By – Floyd Fernandes

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0