無法在示例中添加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代碼片段

回答

相關問題