jquery - button is hovered after scrollBy

Question

$("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?

score 1 · Accepted Answer · answered Mar 05 '21 at 15:30

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>

jquery - button is hovered after scrollBy

1 Answers1