无法在示例中添加JQuery代码片段

-2

我在代码中添加下面一段Jquery代码时遇到了一些问题。它基本上增加了词的点。我尝试了下面的jquery，并将其添加到click函数中时不起作用。但是，它的作用在点击功能之外。无法在示例中添加JQuery代码片段

如何添加它，以便只有点击该按钮后，第1步才会出现，点后面会出现。 10秒后，移至步骤2，再次执行与步骤1相同的操作。直至到达步骤5，此步骤将显示完成并停止闪烁？

var dots = 0; 
setInterval (type, 1000); 

function type() 
{ 
    if(dots < 5) 
    { 
     $('#dots').append('.'); 
     dots++; 
    } 
    else 
    { 
     $('#dots').html(''); 
     dots = 0; 
    } 
}

这是我到目前为止的管理符合的jsfiddle

Link to JSFIDDLE

它基本上是想给喜欢用5个不同状态的进度条，起点和终点不闪，步骤之间开始和结束闪光以显示进度

来源

2014-01-08 David Smith

你应该这样做有点'的setInterval（型，1000）;'你想要的'click'事件中。 http://jsfiddle.net/9ETDg/1/ – melancia

但是，'.html（“STEP1”）'调用删除'＃dots'元素... – 11684

对不起，我的解释不好。我更新了链接，我想要的就是这样。唯一不同的是，我希望在步骤1出现时添加点并开始闪烁 –

这是否适合您？

var dots = 0; 
var step = 1; 
var flag = false; 

var $all = $('#all'); 
var $flash = $('#flash'); 
var $dots = $('#dots'); 

function type() 
{ 
    if(dots < 5) 
    { 
     $dots.append('.'); 
     dots++; 
     setTimeout(type, 1000); 
    } 
    else 
    { 
     $flash.html('Completed'); 
     $dots.html(''); 
     flag = true; 
     dots = 0; 
    } 
} 

function start() { 

    $flash.html("STEP"+step); 
    step++; 

    function runIt() { 
     $all.animate({opacity:'+=1'}, 400); 
     $all.animate({opacity:'+=1'}, 200); 

     if (flag){ 
      return flag = false; 
     } 
     $all.animate({opacity:'-=0.9'}, 600, runIt); 
    } 
    runIt(); 
    type(); 
} 

$('#text').on('click', start);

我也对HTML和CSS做了一些改变。一切都在演示：

DEMO

来源

2014-01-08 16:18:32 matewka

关闭但反过来。时间延迟和点适用于STEP 1，而不适用于我完全重构代码所需的START –

。看到我编辑的答案。 – matewka

好吧，看看你的代码，我注意到的唯一两件事是“setTimeout（type，1000）;”我把点的速度放在你的后面，直到它完成。如何在完成之前添加时间延迟？所以点到5并重新从一个点重新计数到5，直到时间延迟满足 –

无法在示例中添加JQuery代码片段

回答

相关问题