如图，点击中间的切换图标，切换左右两边的城市，并且带有动画效果
只要利用css的特性transition和js的方法toggleClass就可以啦，具体操作如下：
<div class="con"><div class="choose-city"><div class="leave"><p>出发城市</p><p>北京</p></div><div class="exchange"><img id="exchange-img" src="../../img/trainTicket/train-icon.png"></div><div class="go"><p>到达城市</p><p>上海</p></div></div></div>
.con {width: 95%;margin: 32px auto auto auto;background-color: #FFFFFF;text-align: center;}.con>div {display: flex;justify-content: space-between;width: 92%;margin: 0 auto;border-bottom: #EEEEEE solid 1px;}.con>.choose-city>div {text-align: center;position: relative;}.con>.choose-city>.exchange>img {width: 32px;height: 32px;margin-top: 40px;}.con>.choose-city>div>p:first-of-type {color: #999999;font-size: 14px;margin: 15px auto;}.con>.choose-city>.leave>p:last-of-type,.con>.choose-city>.go>p:last-of-type {color: #333;font-size: 20px;margin: 15px auto 5px auto;position: relative;transition: all 1s;right: 0;top: -10px;display: inline-block;}.con>.choose-city>.leave>p:last-of-type {left: 0;}.con>.change>.leave>p:last-of-type {position: relative;left: 270px;top: -10px;transition: all 1s;}.con>.change>.go>p:last-of-type {position: relative;right: 270px;top: -10px;transition: all 1s;}
// 切换往返城市$("#exchange-img").click(function() {$(".choose-city").toggleClass("change");//把choose-city的class和change交换});
即可实现，我现在赶着下班就先不说了，明天，或者今天晚上再补充
