Question

我在代码中添加以下jQuery代码时遇到了一些麻烦。它基本上为单词增加了点。我尝试了以下jQuery，当添加到click功能时，它不起作用。但是在点击功能之外它可以工作。

如何添加它以便仅在单击按钮时，步骤1将显示以下点。 10秒后，让它转到第2步再次执行相同的操作，如第1步。直到我到达步骤5，显示已完成并停止闪烁？

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

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

这是我到目前为止所做的：

jQuery(function($) {
  // all jQuery code goes here  

  $("a").click(function() {
    // do something here  
    // when any anchor is clicked 

    $("#flash").html("STEP1"); // content inside #myElement will be replaced with that specified  

    var flash = $('#flash');

    function runIt() {
      flash.animate({
        opacity: '+=1'
      }, 400);
      flash.animate({
        opacity: '+=1'
      }, 200);
      flash.animate({
        opacity: '-=0.9'
      }, 600, runIt);
    }
    runIt();
  });
  
});

.test {
  float: left;
}

#flash {
  padding: 10px;
}

.content {
  font-size: 25px;
  font-weight: bold;
  width: 100px;
  left: 100px;
  top: 100px;
  color: red;
}

.classname {
  -moz-box-shadow: inset 0px 1px 0px 0px #fceaca;
  -webkit-box-shadow: inset 0px 1px 0px 0px #fceaca;
  box-shadow: inset 0px 1px 0px 0px #fceaca;
  background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffce79), color-stop(1, #eeaf41));
  background: -moz-linear-gradient( center top, #ffce79 5%, #eeaf41 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffce79', endColorstr='#eeaf41');
  background-color: #ffce79;
  -webkit-border-top-left-radius: 0px;
  -moz-border-radius-topleft: 0px;
  border-top-left-radius: 0px;
  -webkit-border-top-right-radius: 0px;
  -moz-border-radius-topright: 0px;
  border-top-right-radius: 0px;
  -webkit-border-bottom-right-radius: 0px;
  -moz-border-radius-bottomright: 0px;
  border-bottom-right-radius: 0px;
  -webkit-border-bottom-left-radius: 0px;
  -moz-border-radius-bottomleft: 0px;
  border-bottom-left-radius: 0px;
  text-indent: 0;
  border: 1px solid #eeb44f;
  display: inline-block;
  color: #ffffff;
  font-family: Arial;
  font-size: 15px;
  font-weight: bold;
  font-style: normal;
  height: 40px;
  line-height: 40px;
  width: 100px;
  text-decoration: none;
  text-align: center;
  text-shadow: 1px 1px 0px #ce8e28;
}

.classname:hover {
  background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #eeaf41), color-stop(1, #ffce79));
  background: -moz-linear-gradient( center top, #eeaf41 5%, #ffce79 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeaf41', endColorstr='#ffce79');
  background-color: #eeaf41;
}

.classname:active {
  position: relative;
  top: 1px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test"><a href="#" id="text" class="classname">TEXT</a></div>

<div class="test">
  <div id="flash">Start<span id="dots"></span></div>
</div>

基本上假设喜欢具有5种不同状态的进度条，开始和结束不闪烁，介于开始和结束闪光之间以显示进度

Answer 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

无法在示例中添加这段jQuery代码

1 个答案: