Javascript 菜单文本颜色移动效果

我的菜单如下所示：

<nav>
    <a href="#">
        <span class="black">Home</span>
        <span class="red active">Home</span>
    </a>
    <a href="#">
        <span class="black">Longer menu item</span>
        <span class="red">Longer menu item</span>
    </a>
    <a href="#;">
        <span class="black">Two words</span>
        <span class="red">Two words</span>
    </a>
    <a href="#">
        <span class="black">About</span>
        <span class="red">About</span>
    </a>
    <a href="#">
        <span class="black">Contact</span>
        <span class="red">Contact</span>
    </a>
</nav>

活动菜单项为红色。当用户单击链接时，红色应该从活动菜单项向右移动，同时单击的链接应该从左向右变为红色

这里有一个来告诉你我的意思。单击第二个链接，然后单击第三个链接以查看效果

如果从左向右移动，单击的链接会漂亮地变成红色，但最初的红色文本会向右移动，而不是只移动颜色

我应该如何修复此效果？
我如何使这种效果也在左方向工作

欢迎提出任何建议

编辑：
把事情弄清楚：我想，但在文字上。如果在第一行上从左到右再向后移动鼠标，就会看到效果。我想在点击，而不是悬停

有两种情况：

单击活动链接右侧的菜单项->颜色效果应向右

单击活动链接左侧的菜单项->颜色效果应转到左侧

也许吧

---

如果你想让你的颜色向左滑动，试着修正

。红色

向左，它看起来像width=0到了右角

这就是你要找的，从红色到黑色，从黑色到红色

并更改CSS

.red {
    top: 0;
    right: auto;
    left: 0;
    width: 0;
    color: red;
    display: none;
    position: absolute;
    z-index: 5;
    overflow: hidden;
}
.red.active {
    left: 0;
    right: auto;
    display: block;
    width: 100%;
}

也许你的意思是：

更新了两种方式：

如果用户快速按下，则略有改善：

$（'.blackholder'）.parent（）.on（'click'，函数（事件）{
如果（$（此）[0]==$（'.red.active'）.parent（）[0]）{
返回；
}
var animFull=函数（obj）{
obj.addClass（'top'）.finish（）
.css（'width'，'0'）。动画（{width:'100%}{
持续时间：1000，
队列：false，
完成：函数（）{
$（this.removeClass（'top'）；
}
});
};
var moveRight=函数（atag）{
动物(
$（'.red.active'）。removeClass（'active'）。同级（'.black'））
);
动物(
$（atag）.children（'.red'）.addClass（'active'））
);
};
变量0=函数（obj）{
obj.addClass（'top'）.finish（）
.animate（{width:'0'}{
持续时间：1000，队列：false，
完成：函数（）{
$（this.removeClass（'top'）.css（'width'，'100%）；
}
});
};
var moveLeft=函数（atag）{
阿尼泽罗(
$（'.red.active'）.removeClass（'active'））
);
$（atag）.children（'.red'）.addClass（'active'）；
阿尼泽罗(
$（atag）.children（“.black”）
);
};
if（$（'.red.active'）.parent（）.position（）.left<$（this.position（）.left）{
右移（此）；
}否则{
左移（此）；
}
});

.blackholder{
颜色：#000；
}
.black.top、.red.top{
z指数：3；
}
布莱克先生{
z指数：1；
颜色：#000；
左：0；
位置：绝对位置；
}
瑞德先生{
颜色：红色；
左：0；
位置：绝对位置；
}
.red.active{
z指数：2；
}

---

如果您需要任何更改，如我在代码中添加注释，请随意评论。

我只是说，但我认为

位置：绝对

始终涵盖非

绝对

元素，而不考虑

z-index

。如果它们直接位于彼此上方，请选择您想要的方式。我没有考虑过这种情况。。。没关系，是的！这就是案例1的效果！但是你能让它在案例2中起作用吗？（请参见编辑的问题）@Barnee已更新，如果用户按得太快，会有轻微改进您答案旁边的绿色勾号表示感谢！非常感谢你！

$('.black').on('click', function (event) {
    $('.red').animate({
        width: 0
    }, {
        duration: 1000,
        queue: false
    }).removeClass('active');
    $(this).parent().find('.red').addClass('active').animate({
        width: '100%'
    }, {
        duration: 1000,
        queue: false
    });
});

.red {
    top: 0;
    right: auto;
    left: 0;
    width: 0;
    color: red;
    display: none;
    position: absolute;
    z-index: 5;
    overflow: hidden;
}
.red.active {
    left: 0;
    right: auto;
    display: block;
    width: 100%;
}