Question

所以我希望能够每秒更改div的宽度，但我目前使用的代码似乎不起作用

<script type="text/javascript">

    $("#progress").css("width", "55%");

</script>

<div id="progress"></div>

我已在css中将'progress'div设置为1px。

#progress {
position: relative;
background: url('prog1.jpg') repeat-x;
height: 100%;
border: 1px solid #145b8c;
border-radius: 5px;
margin-left: -1px;
margin-top: -1px;
width: 1px;
}

任何帮助都将不胜感激。

Answer 1

有两种解决方案。

使用document.ready功能。
加载html后放入JavaScript。

<强>代码：

 $(function (){
     $("#progress").css("width", "55%");
 });

您的解决方案无法正常工作，因为有时元素未被加载，因此无法更改。加载整个文档时执行Document.ready。当执行ready事件中的代码时，您确定每个html元素都已加载。

要每秒更改代码，需要使用setInterval函数

 setInterval(function() {
  // Do something every 1 second
 }, 1000);

每秒进行一次示范+ 5px

$(function (){

     var counter = 1;
     setInterval(function() {
      counter = (counter + 5) % 100;
      $("#progress").css("width", counter + "%");
     }, 1000);
 });

Watch working demo

Answer 2

将您的代码包装在文档就绪处理程序

中

 $(function(){
    $("#progress").css("width", "55%");
 });

Answer 3

我不确定你执行jQuery代码的方式/位置。如果它真的如你所指定的那样，那么当它执行时，你的div还不存在。相反，请在文档加载后尝试执行它：

$(document).ready(function() {
    $("#progress").css("width", "55%");
});

Answer 4

您也可以将该代码用于onload函数，或者像其他朋友一样使用就绪处理程序。

HTML：

<body onload="init()">

使用Javascript：

function init() {
    $("#progress").css("width", "55%");
}

Answer 5

获取当前宽度并更新它并使用setInterval和clearInterval

参考此答案： http://stackoverflow.com/questions/7164090/jquery-run-click-function-every-x-seconds

我还建议Progressbar是否适合你

<script>
  $(function() {
    var progressbar = $( "#progressbar" ),
      progressLabel = $( ".progress-label" );

    progressbar.progressbar({
      value: false,
      change: function() {
        progressLabel.text( progressbar.progressbar( "value" ) + "%" );
      },
      complete: function() {
        progressLabel.text( "Complete!" );
      }
    });

    function progress() {
      var val = progressbar.progressbar( "value" ) || 0;

      progressbar.progressbar( "value", val + 1 );

      if ( val < 99 ) {
        setTimeout( progress, 100 );
      }
    }

    setTimeout( progress, 3000 );
  });
  </script>

Answer 6

如果我已正确理解问题，那么答案是添加：

显示：内联; 到ID #progress

希望它有所帮助..

Answer 7

这可能是解决方案：http://jsfiddle.net/balintbako/kNgg7/（它停在100，但你可以调整它）

HTML

<div id="main">
    <div id="progress"></div>
</div>

JS

function progress(speed) {
    setInterval(function() {
        $("#progress").animate({
            width: "+=" + speed
        });
        if ($("#progress").width < 100) {
            progress(speed);
        }
    }, 1000);
}

progress(1);

无法使用JQuery更改div宽度

7 个答案: