1

我有一个文本fadeIn/fadeOut 脚本，在单击时会显示一个指定的图像，持续时间是用setTimeout 定义的。

当我不想在整个设定时间内看到该图像时，我想创建一个取消按钮。

我尝试将 clearTimeout 函数添加到 class="cancel" 并将其指向 a 但无法使其工作...

jsFiddle

我的html：

<div id="help">
<p class="helper" data-timeout-value="5000" id="1">Do you...?</p>
<p class="helper" data-timeout-value="7000" id="2">Do you still...?</p>
<p class="helper" data-timeout-value="8000" id="3">Do you really still...?</p>
</div>

<div id="image1"></div>
<div id="image2"></div>
<div id="image3"></div>

脚本

var myTime;
$(".helper").click(function(){
   var $this = $(this),
       $id = $this.attr('id'),
       $timeout = $this.attr('data-timeout-value');

   $("#help").fadeOut(500);
   $("#image"+$id).fadeIn(500);

   myTime = setTimeout(function() {
      $('#image'+$id).fadeOut(500);
      $("#help").fadeIn(500);
   }, $timeout);
})

$('div.cancel').click(function(){
        clearTimeout(myTime);

});
4

2 回答 2

3

您似乎使事情复杂化，只需使用jQuery的动画和延迟，并在单击取消按钮时停止它们

var helper = $(".helper");
var helperIndex = -1;

(function showNextHelp() {
    ++helperIndex;
    helper.eq(helperIndex % helper.length)
          .fadeIn(500)
          .delay(1000)
          .fadeOut(500, showNextHelp);
})();

helper.on('click', function(){
   $("#help").fadeOut(500);
   $("#image" + this.id).addClass('active')
                        .fadeIn(500)
                        .delay($(this).data('timeout-value'))
                        .queue(function(next) {
                            $(this).fadeOut(500, function() {
                                $(this).removeClass('active');
                            });
                            $("#help").fadeIn(500);
                            next();
                        });
});

$('.cancel').click(function(){
    $('.active').stop(true, true).hide(); // use fadeOut / In for animations
    $("#help").stop(true, true).show();
});

小提琴

于 2014-08-31T16:31:59.027 回答
2

像这样修改你的代码：

var id;
var myTime;
$(".helper").click(function(){
    var $this = $(this);
    id = $this.attr('id');
    $timeout = $this.attr('data-timeout-value');
   $("#help").fadeOut(500);
   $("#image"+id).fadeIn(500);

    myTime = setTimeout(function() {
      showHelp(id);
   }, $timeout);
})

function showHelp(){
    $('#image'+id).fadeOut(500);
    $("#help").fadeIn(500);
}

$('div.cancel').click(function(){
    clearTimeout(myTime);
    showHelp();
});

检查 JSFiddle 演示

于 2014-08-31T16:22:10.057 回答