Javascript 在动画之后删除内联样式的效果不一致

我有一个选项卡式导航菜单，当您单击一个元素时，子图标的原始位置存储在数据中，图标向右滑动：10px

当您单击一个替换元素时，该元素将设置动画返回到其数据右侧（原始位置），然后应清除右侧：10px

由于某些原因，我无法可靠地清除该内联样式

这是密码

$('ul.primary-nav >li >a').click(function(e){
  e.preventDefault();
  var $this = $(this);
  var $i = $this.children('i');

  left = $i.offset().left;
  right = $this.outerWidth() - ( left + $i.outerWidth() );


  $('ul.primary-nav >li >a').removeClass('current')
  $i.attr('data-right', right);
  $i.css('right', right);

  $this.addClass('current');
  $i.animate({right: '10px'});

  $('ul.primary-nav >li >a').not($this).each(function(){

      $oi = $(this).children('i');

      $oi.stop().animate({ right: $oi.attr('data-right') }, 300, function _afterAnimation() {
          console.log('afterAnimation called');
          $oi.css('right', '');
      });

  });

  var $dropdown = $this.parent().children('.drop-down');

  if ($dropdown.hasClass('show')){
    url = $this.attr('href');
    window.location.href = url;
  }
  else {

    $dropdown.addClass('show');
    $('.nav-bg').show();

    $this.parent().siblings().children('.drop-down').removeClass('show');

  }

});

---

有时正确的样式会清除，有时则不会。有什么想法吗？

如果你能安装一个jsfiddle.net；，那就太棒了。）只是一个简单的问题，是否有需要使用jQuery动画的原因：）？也许CSS动画在jQuery toggleClass支持下工作得更好？我必须使用jQuery，因为我要从右自动转到右0。