jquery on hover stop the function

Question

i have an autoplay tab with animation and i want to stop the autopaly on hover

i want whene i hover the tab container (

) the autoplay stop

i tried with this code but nothing

    $('.howItWorks').hover(function() {
            tabs.clearQueue();
            tabs.stop();
        }, function() {
          showTabContent();
    });

$(document).ready(function(jQuery) {
  $(function () {
    var boxes = $(".HWBlock"),
      tabs = $(".tablinks");

    function showTabContent() {
      return boxes.queue("tabs", $.map(boxes, function (el, curr) {
        return function (next) {
          boxes.hide() // hide `.box` elements
            .add(tabs) // add `.tabs` to current selector
            .removeClass("current") // remove `.current` class
            .filter(el) // current `.box` element
            .fadeIn(150) // fade in current `.box` element
            .add(tabs.eq(curr)) // add `.tabs` at index `curr` to selector
            .addClass("current") // add `current` `className` to selector
            .end() // end current selection at `.boxes` selector
            .delay(2000, "content") // set, delay `"content"` queue 5000ms
            .dequeue("content") // dequeue `"content"` queue
            .promise("content") // at completed promise of `"content"` queue
            .then(next) // call next function in `"tabs"` queue
        }
      }))
        .dequeue("tabs") // dequeue `"tabs"` queue
        .promise("tabs") // at completed promise of `"tabs"` queue
        .then(showTabContent); // call `showTabContent` recursively
    }
    $('.howItWorks').hover(function() {
            tabs.clearQueue();
            tabs.stop();
        }, function() {
          showTabContent();
    });

    showTabContent();
  });
});

jquery on hover stop the function

0 Answers