动画后不能一致地删除内联样式

Question

我有一个标签式导航菜单，当您点击一个元素时，子图标的原始位置存储在数据中，图标向右滑动：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');

  }

});

有时候，正确的风格会清除，有时则不会。有什么想法吗？