简体   繁体   中英

does jQuery stop() work on custom functions?

There are three images that I have made a tooltip for each. I wanted to show tooltips within timed intervals say for 2 seconds first tooltip shows and for the second interval the 2nd tooltips fades in and so on.

for example it can be done with this function

function cycle(id) {
    var nextId = (id == "block1") ? "block2": "block1";
    $("#" + id)
        .delay(shortIntervalTime)
        .fadeIn(500)
        .delay(longIntervalTime)
        .fadeOut(500, function() {cycle(nextId)});
}

now what i want is to stop the cycle function when moseover action occurs on each of the images and show the corresponding tooltip. And again when the mouse went away again the cycle function fires.

If I understand everthing correctly, than try this code. Tt stops the proccess if you hover the image and continues if you leave the image. The stop() function will work on custom functions if you implement them like the fadeOut(), slideIn(), ... functions of jquery.

  $('#' + id)
.fadeIn(500, function () {
   var img = $(this).find('img'),
       self = $(this),
       fadeOut = true;

   img.hover(function () {
                fadeOut = false;                    
            }, 
            function () {
                window.setTimeout(function () {
                    self.fadeOut(500);
                }, 2000);
            }
      );

    window.setTimeout(function () {
        if (fadeOut === false) {
            return;
        }
        self.fadeOut(500);
    }, 2000);
});​

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM