Javascript Opacity更改在第一次事件传递时无法在Chrome中运行，但在第二次运行时有效

Question

我有一个四项标签栏插件，我使用JS动画。我通过在css类上设置过渡状态并使用JS将不透明度从0更改为1并根据需要返回时，使每个选项卡内容部分在单击相应选项卡时淡入。代码如下所示：

document.body.addEventListener('mouseup', function (event) {
  var target = event.target.toString();
  var name = target.substring(target.length - 6, target.length - 1);

  if(name == 'panel') {
    var num = target.slice(-1),
      arrow = document.getElementById('tab-arrow');
    num = parseInt(num);

    for(var i = 1; i <= 4; i++) {
      if(i === num) {
        document.getElementById('panel' + i).style.opacity = '1';
      } else {
        document.getElementById('panel' + i).style.opacity = '0';
      }
    }


    //Ignore this part - It is a different aspect of the animation that works ok...
    if(num === 1) {
      arrow.style.marginLeft = "0px";
    } else if(num === 2) {
      arrow.style.marginLeft = "250px";
    } else if(num === 3) {
      arrow.style.marginLeft = "495px";
    } else {
      arrow.style.marginLeft = "745px";
    }
  }
}, false);

我的问题是，在第一次点击进入另一个标签时，不会出现淡入效果。在此之后每次点击都会发生，但不是第一次。而且，这个问题只发生在铬。可能是什么导致了这个？

感谢。