JQuery tabs with hoverIntent

问题

Hi: I am trying to implement a delay on the loading of JQuery tabs (the activation / raising of a tab, on a prolonged hover).

While I implemented the StackOverflow solution described here,

[1] Adding HoverIntent to jQuery UI Tabs

JSFiddle: https://jsfiddle.net/mvo6n9tc/1/

... I am interested in the code described in this much-upvoted StackOverflow solution,

[2] Delay jquery hover event?

In both cases the posts are very old, so my questions are:

Is this still the preferred approach to the delayed loading of JQuery tabs (only on a paused hover)?
The HTML code below is a derivation of StackOverflow [2], above -- why is it not working (no delay; triggering on any hover, however brief)?
- JSFiddle: https://jsfiddle.net/7n9Lu23m/

<!DOCTYPE html>
<html encoding="UTF-8" lang="en-US" xmlns="https://www.w3.org/1999/xhtml/">

<head>
  <meta charset="utf-8">
  <title>JQuery hoverIntent demo</title>
  <link rel="shortcut icon" href="#">

  <!-- JQuery versions: https://code.jquery.com/jquery/ -->

  <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>

  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">

  <!-- https://cdnjs.com/libraries/jquery.hoverintent -->
  <!-- [older versions back to 2013 available] -->

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.hoverintent/1.10.1/jquery.hoverIntent.min.js" integrity="sha512-gx3WTM6qxahpOC/hBNUvkdZARQ2ObXSp/m+jmsEN8ZNJPymj8/Jamf8+/3kJQY1RZA2DR+KQfT+b3JEB0r9YRg==" crossorigin="anonymous"></script>

  <script type = "text/javascript">
    $(init);

    function init(){
      function hoverIntentCfg() {
        hiConfig = {
          sensitivity: 7,
          interval: 500,
          timeout: 500,
        }
        console.log('hiConfig:', hiConfig)
      }
      // $("#tabs").tabs({event: 'mouseover'}).hoverIntent({sensitivity:'7', interval:'2000', timeout:'2000'});
      $("#tabs").tabs({event: 'mouseover'}).hoverIntent(hoverIntentCfg);
    }
  </script>
</head>

<body>
  <div id = "tabs">

    <ul>
      <li><a href="#tab1">Search</a></li>
      <li><a href="#tab2">Documents</a></li>
    </ul>

    <div id="tab1" class="tab">
      <h2>Tab 1</h2>
      <div>
        <ul>
          <li>apples</li>
        </ul>
      </div>
    </div>

    <div id="tab2" class="tab">
      <h2>Tab 2</h2>
      <div>
        <ul>
          <li>bananas</li>
        </ul>
      </div>
    </div>

  </div>

</body>
</html>

来源：https://stackoverflow.com/questions/65835634/jquery-tabs-with-hoverintent

标签

jquery

ajax

jquery-ui-tabs

hoverintent