Přeruseni funkce pri mouseleave

Ahoj,
mám tento základni kod:

Kód:

  $(".product_title").on({
    mouseenter: function () {
        $(this).find('h1').fadeOut();
        $(this).find('p').delay(400).fadeIn();

    },
    mouseleave: function () {
      $(this).find('p').fadeOut();
      $(this).find('h1').delay(400).fadeIn();
    }
});

potřeboval bych aby pri mouseleave se prerusila ta funkce co zacala pri mouseenter... Snad je to srzumitelne... Děkuji moc.

Špatně nad tím uvažujete.

V handleru mouseenter si pomocí setTimeout nastavte funkci, která se spustí až za N milisekund.

V handleru mouseleave si pomocí clearTimeout odpočet zrušte.

Zkousim to takto, ale je to blbe ... :-/

Kód:

  var hover;

  $(".product_title").on({
    mouseenter: function () {
        $(this).find('h1').fadeOut();
        $(this).find('p').delay(400).fadeIn();
        hover = setTimeout(function(){
          $(this).find('p').fadeOut();
          $(this).find('h1').delay(400).fadeIn();
        }, 10000);
    },
    mouseleave: function () {
      clearTimeout(hover);
    }
});

Kde je prosim chyba?

Nefunguje vám to nejspíše protože callback funkce funkce setTimeout má vlastní vazbu na 'this' a jQuery selector vám tudíž nic nenajde.

To je alespoň jasné z kódu, jestli máte nějaký jiný problém v HTML tak to vědět nemůžu.

hmm

ani toto nefunguje

Kód:

var hover;

  $(".product_title").on({
    mouseenter: function () {
        $(this).find('h1').fadeOut();
        $(this).find('p').delay(400).fadeIn();
        hover = setTimeout(function(){
          alert('leave');
        }, 10000);
    },
    mouseleave: function () {
      clearTimeout(hover);
    }
});

Potom bych si zkontroloval HTML.

Toto zjevně funguje: https://jsfiddle.net/Jehuty/z81rLab4/2/