jquery - 寻找一种在 div 之间滑动底部边框的方法

Question

我正在寻找一种方法来将边框底部滑动到鼠标悬停在每个图像上时。目前，当我点击每张图片时，边框底部类会从其他图片中移除并添加到点击的图片中。有没有办法让它动画成滑动效果？

Image of website area

代码:https://jsfiddle.net/PeterR/dbbwfbws/

$(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");
    })

Answer 1

这是一个css方法

#section2{
	width: 100%;
	height: 650px;
	/*background-color: #f5f7f9;*/
	position:relative;
    background-color:#e15915;
}

#section2:after{
	content:'';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -50px;
    width: 0;
    height: 0;
    border-top: solid 50px #e15915;
    border-left: solid 50px transparent;
    border-right: solid 50px transparent;
}

#section2-container{
	margin: 0 auto;
	width: 1100px;
}

#features-images{
	margin: 0 auto;
	width: 632px;
 

}

.featureicon{
  position:relative;
	margin-top: 50px;
	width: 175px;
	height: 175px;
  display: inline-block;
  overflow:visible;
   border:solid;
   
}

.featureiconimage{
  position:absolute;
	width: 100%;
  padding-bottom:0px;
  transition-property:padding,border;
  transition-duration:0.5s;
  -moz-transition-property:padding,border;
  -moz-transition-duration:0.5s;
  -webkit-transition-property:padding,border;
  -webkit-transition-duration:0.5s;
  -ms-transition-property:padding,border;
  -ms-transition-duration:0.5s;
}

#feature2{
	margin-left: 50px;
	margin-right: 50px;
}

.featureiconimage:hover{
	cursor: pointer;
	padding-bottom:20px;
  border-bottom: 5px solid white;
  
  
}

<div id="section2">
  <div id="features-images">  
    <div class="featureicon" id="feature1">
      <img class="featureiconimage" src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-person-128.png">
    </div>
    <div class="featureicon" id="feature2">
      <img class="featureiconimage" src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-person-128.png">
    </div>
    <div class="featureicon" id="feature3">
      <img class="featureiconimage" src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-person-128.png">
    </div>
</div>
</div>
</div>

注意:我的大部分前缀都是为transition属性。你可以添加其余的:D