jquery – button is hovered after scrollBy

$("button").on("click", () => {
    console.log($("button").is(":hover"));
  window.scrollTo(0,0);
  console.log($("button").is(":hover"));
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button style="margin-top:600px;">
CLICK
</button>
// method called on button click

showTab(n) {
    this.tabs.each((idx, tab) => {
        $(tab).hide();
    });

    $(this.tabs[n]).show();
    this.currentTab = parseInt(n);
    window.scrollBy(-100, -100);
    window.scrollTo(0,0);
}

at the end of that code the NextButton.is(“:hover”) returns true, it shows also in button style. I cannot figure out why. Any ideas? Is there a way to “unhover” the button with jQuery?

Answer

The function calls are asynchronous. Therefore immediatly after calling scrollTo(..) the console.log(..) gets executed while still hovering the button.

To circumvent this behaviour you would usually use a callback function, that gets called after your initial function has finished.

$("button").on("click", function(){
  console.log($("button").is(":hover"));
  $('html').animate({
    scrollTop: 0
  }, 500, function() {
     // gets executed after the animation has finihsed
     console.log($("button").is(":hover"));
  });
  
})
button {
  position:absolute;
  top: 650px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>
  CLICK
</button>

Leave a Reply

Your email address will not be published. Required fields are marked *