javascript - 进度条仅适用于页面加载/重新加载

Question

Disclaimer: Tis code is taken from this jsfiddle

我想让youtube.com像progressbar一样，我试过这种方式

$('#search').click(function(){ 
  $({property: 0}).animate({property: 105}, {
    duration: 4000,
    step: function() {
      var _percent = Math.round(this.property);

      $('#progress').css('width',  _percent+"%");
      if(_percent == 105) {
        $("#progress").addClass("done");
      }
    },
    complete: function() {

    }
  });

});

  #progress {
        position: fixed;
        z-index: 2147483647;
        top: 0;
        left: -6px;
        width: 0%;
        height: 2px;
        background: #b91f1f;
        -moz-border-radius: 1px;
        -webkit-border-radius: 1px;
        border-radius: 1px;
        -moz-transition: width 500ms ease-out,opacity 400ms linear;
        -ms-transition: width 500ms ease-out,opacity 400ms linear;
        -o-transition: width 500ms ease-out,opacity 400ms linear;
        -webkit-transition: width 500ms ease-out,opacity 400ms linear;
        transition: width 500ms ease-out,opacity 400ms linear
    }
    #progress.done {
        opacity: 0
    }
    #progress dd,#progress dt {
        position: absolute;
        top: 0;
        height: 2px;
        -moz-box-shadow: #b91f1f 1px 0 6px 1px;
        -ms-box-shadow: #b91f1f 1px 0 6px 1px;
        -webkit-box-shadow: #b91f1f 1px 0 6px 1px;
        box-shadow: #b91f1f 1px 0 6px 1px;
        -moz-border-radius: 100%;
        -webkit-border-radius: 100%;
        border-radius: 100%
    }
    #progress dd {
        opacity: 1;
        width: 20px;
        right: 0;
        clip: rect(-6px,22px,14px,10px)
    }
    #progress dt {
        opacity: 1;
        width: 180px;
        right: -80px;
        clip: rect(-6px,90px,14px,-6px)
    }
    @-moz-keyframes pulse {
        30% {
            opacity: 1
        }
        60% {
            opacity: 0
        }
        100% {
            opacity: 1
        }
    }
    @-ms-keyframes pulse {
        30% {
            opacity: .6
        }
        60% {
            opacity: 0
        }
        100% {
            opacity: .6
        }
    }
    @-o-keyframes pulse {
        30% {
            opacity: 1
        }
        60% {
            opacity: 0
        }
        100% {
            opacity: 1
        }
    }
    @-webkit-keyframes pulse {
        30% {
            opacity: .6
        }
        60% {
            opacity: 0
        }
        100% {
            opacity: .6
        }
    }
    @keyframes pulse {
        30% {
            opacity: 1
        }
        60% {
            opacity: 0
        }
        100% {
            opacity: 1
        }
    }
    #progress.waiting dd,#progress.waiting dt {
        -moz-animation: pulse 2s ease-out 0s infinite;
        -ms-animation: pulse 2s ease-out 0s infinite;
        -o-animation: pulse 2s ease-out 0s infinite;
        -webkit-animation: pulse 2s ease-out 0s infinite;
        animation: pulse 2s ease-out 0s infinite
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="progress" class="waiting">
    <dt></dt>
    <dd></dd>
</div>
<input type="submit" id="search" value="Search" />

但它只在页面加载后工作一次，我希望每当我单击 Search 按钮时它都必须工作。

Answer 1

在开始新的之前，只需从 progress div 中删除 done 类。

$("#progress").removeClass("done");

重新开始后进度条先回退的情况比较难避免。先把它的宽度重置为0，直接在添加done之后:

$("#progress").addClass("done").css('width', 0);

由于 opacity 过渡，当栏回到零宽度时仍然有几毫秒是可见的。所以我最终只是简单地隐藏了它(设置了它的 display 属性)。

完整代码如下:

$('#search').click(function(){
  $("#progress").removeClass("done").show();
  $({property: 0}).animate({property: 105}, {
    duration: 4000,
    step: function() {
      var _percent = Math.round(this.property);

      $('#progress').css('width',  _percent+"%");
      if(_percent == 105) {
        $("#progress").addClass("done").hide();
      }
    },
    complete: function() {

    }
  });
});