Question

我想在html / php战斗脚本上做一些动态效果。

我一只手拿着一个逐渐显示每个对手转弯的功能，例如：

<button id='fight'>Fight</button>
<div class='log right'> A hits B </div>
<div class='log left'>  B hits A </div>
<div class='log left'>  B hits A </div>
<div class='log right'> A hits B </div>
<div class='log left'>  B hits A </div>

<script>
$(function() {
  $('.log').hide();                                                 
  $('#fight').click(function() {                                        
    $('.log').each(function(i) {                                    
      var dir = $(this).hasClass('left') ? 'left' : 'right';        
      $(this).delay(i * 500).toggle('slide', {direction: dir}); 
    });
  });
});
</script>

另一方面，我有另一个使用jQuery UI进度条显示和更新健康栏的功能，类似于：

<div id='progressBar'></div>

<script>
var arr = <?php echo json_encode($health_array); ?>;
var i = 0;

var interval = setInterval(updateBar, 500);
function updateBar() {
  if (arr[i] == 0) {clearInterval(interval);}
  $('#progressBar').progressbar({
    value : arr[i]
  });
  i++;
}
</script>

现在，健康栏的减少速度比屏幕上显示的div快。显然这不好，他们需要同步。我不知道如何根据div的幻灯片切换在updateBar（）函数中加入更多延迟。我甚至不确定我是否正在以良好的方式解决问题（JS不是我的强项）......

Answer 1

我想我明白你要做什么了。有点像游戏，你希望在每次动作后降低进度条。

创造了这个可能有用的小提琴：https://jsfiddle.net/Twisty/ze89w87j/

<强> HTML

<button id='fight'>Fight</button>
<div class='log right'> A hits B </div>
<div class='log left'> B hits A </div>
<div class='log left'> B hits A </div>
<div class='log right'> A hits B </div>
<div class='log left'> B hits A </div>
<div class="ui-widget">
  <div id='progress-a' class='power'>Player A</div>
  <div id='progress-b' class='power'>Player B</div>
</div>

<强> CSS

.power {
  width: 45%;
  display: inline-block;
  margin: .4em .2em;
}

<强>的JavaScript

var arr = {
  a: 100,
  b: 100
};

var i = 1;

function updateBar(p) {
  $('#progress-' + p).progressbar("value", arr[p]);
  i++;
}

$(function() {
  $('.log').hide();
  $('#fight').click(function() {
    $('.log').each(function(i) {
      var dir = $(this).hasClass('left') ? 'left' : 'right';
      var player = $(this).hasClass('left') ? 'a' : 'b';
      var $log = $(this);
      setTimeout(function() {
        $log.toggle('slide', {
          direction: dir
        });
        arr[player] -= 15;
        updateBar(player);
        console.log(arr);
      }, i * 500);
    });
  });
  $('.power').progressbar({
    value: 100
  });
});

由于您没有显示示例数据，我不得不做出一些假设。如果你有玩家A和B，会有一些减少进度条的动作。所以我创建了2个吧。随着阵列降低，进度条会更新。

在进度条更新和另一个功能之间同步

1 个答案: