Jquery 正在寻找在div之间滑动底部边框的方法

我正在寻找一种方法，当鼠标悬停在每个图像上时，将边框滑动到底部。目前，当我单击每个图像时，border底部类将从其他图像中删除，并添加到单击的图像中。有没有办法将其设置为滑动效果的动画

代码：

---

这里是一种css方法

#第2节{
宽度：100%；
高度：650px；
/*背景色：#f5f7f9*/
位置：相对位置；
背景色：#e15915；
}
#第2节：之后{
内容：''；
位置：绝对位置；
最高：100%；
左：50%；
左边距：-50px；
宽度：0；
身高：0；
边框顶部：实心50px#e15915；
左边框：实心50px透明；
右边框：实心50px透明；
}
#第二节集装箱{
保证金：0自动；
宽度：1100px；
}
#特色图片{
保证金：0自动；
宽度：632px；
}
.功能图标{
位置：相对位置；
边缘顶部：50px；
宽度：175px；
高度：175px；
显示：内联块；
溢出：可见；
边框：实心；
}
.特色形象{
位置：绝对位置；
宽度：100%；
垫底：0px；
转换属性：填充、边框；
过渡时间：0.5s；
-moz转换属性：填充、边框；
-moz转换持续时间：0.5s；
-webkit转换属性：填充、边框；
-webkit转换持续时间：0.5s；
-ms转换属性：填充、边框；
-ms过渡时间：0.5s；
}
#特点2{
左边距：50像素；
右边距：50px；
}
.功能图标：悬停{
光标：指针；
垫底：20px；
边框底部：5px纯白；
}

---

底部边框当前以悬停方式移动，至少在Chrome/Windows上是这样：此答案提供了一种向非图像背景添加滑动效果的方法。

$(document).ready(function () {
        $("#feature1").addClass("iconunderline");
        $("#feature2").removeClass("iconunderline");
        $("#feature3").removeClass("iconunderline");
    })

    $("#feature1").click(function () {
        $("#feature1").addClass("iconunderline");
        $("#feature2").removeClass("iconunderline");
        $("#feature3").removeClass("iconunderline");
    })

    $("#feature2").click(function () {
        $("#feature1").removeClass("iconunderline");
        $("#feature2").addClass("iconunderline");
        $("#feature3").removeClass("iconunderline");
    })

    $("#feature3").click(function () {
        $("#feature1").removeClass("iconunderline");
        $("#feature2").removeClass("iconunderline");
        $("#feature3").addClass("iconunderline");
    })