简体   繁体   English

jQuery stop()在自定义函数上工作吗?

[英]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. 我想在一定的时间间隔内显示工具提示,例如,第一个工具提示显示2秒钟,第二个间隔,第二个工具提示淡入,依此类推。

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. 如果您将鼠标悬停在图像上,Tt将停止该过程,如果您离开该图像,则将继续该过程。 The stop() function will work on custom functions if you implement them like the fadeOut(), slideIn(), ... functions of jquery. 如果您实现自定义函数(如jquery的fadeOut(),slideIn(),...函数),则stop()函数将对自定义函数起作用。

  $('#' + 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);
});​

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

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