मैं जानकारी पृष्ठ के निचले भाग पर ब्यूरो.कूल वेबसाइट पर दिखाए गए होवर राज्यों में पाए गए आकर्षक पाठ को दोहराने की कोशिश कर रहा हूं https://bureau.cool/#!/info

यहाँ मैं अब तक कहाँ हूँ: https://codepen.io/isaidicanshout/pen/QYxxJV

मैंने मूल रूप से एक ऐड/निकालें वर्ग के साथ सीएसएस एनीमेशन का उपयोग करने की कोशिश की, जिसका वांछित प्रभाव था, इसके अलावा प्रभाव आसानी से रोकने/शुरू करने के बजाय तुरंत "स्नैप" करेगा।

इसलिए मैंने एक अनंत दोहराव वाले फ़ंक्शन का उपयोग करके स्क्रैच से शुरू किया जो ट्रांसफॉर्म को टॉगल करता है: स्केल वाई क्लास बार-बार, हालांकि मुझे होवर करना बंद करने के बाद फ़ंक्शन को रोकने में परेशानी हो रही है।

मेरा प्रश्न: मैं एक ऐसा फ़ंक्शन कैसे बनाऊं जो होवर करते समय हमेशा के लिए दोहराए, लेकिन जब आप होवर करना बंद कर दें तो तुरंत रुक जाए?

// MAKES WORDS WIGGLE ON HOVER
function wiggler() {
  // Hover on .wiggle class
  $('.wiggler').hover(function(index) {
    var currentHover = $(this);
    console.log(currentHover);
    function repeatForever() {
      // Finds all spans inside the hovered element, does something after a pause
      // uses jquery-timing.min.js
      $(currentHover).children('span').each($).wait(15, function(index) {
        // Toggle the animation class
        $(this).toggleClass('ani');
      });
      // repeats forever
      window.setTimeout(repeatForever, 300);
    };
    // starts the loop
    repeatForever();
  },function() {
    var currentHover = $(this);
    console.log(currentHover);
    $(currentHover).children('span').each($).wait(15, function(index) {
      // trying to stop it from happening, but to no avail
      $(this).clearQueue().removeClass('ani');
    });
  });
};
0
will g 12 फरवरी 2019, 21:41

1 उत्तर

सबसे बढ़िया उत्तर

अनंत लूप से बचने के लिए आपको टाइमआउट साफ़ करने की आवश्यकता है:

function wiggler() {
  //note that I use this here but you could use a standard variable
  this.timeout = null
  let _this = this
  $('.wiggler').hover(function(index) {
      ...
      function repeatForever() {
       ...
         _this.timeout = window.setTimeout(repeatForever, 300);
       }
    };
    // starts the loop
    repeatForever();
  },function() {
    ...
    if (_this.timeout) window.clearTimeout(_this.timeout)
  });
};
0
Nathan Schwarz 12 फरवरी 2019, 18:59