本文共 1376 字，大约阅读时间需要 4 分钟。

如图，点击中间的切换图标，切换左右两边的城市，并且带有动画效果

只要利用css的特性transition和js的方法toggleClass就可以啦，具体操作如下：

   
    
    
        
     
            
      
出发城市
            
      
北京
        
     
        
     
            
              
     
        
     
            
      
到达城市
            
      
上海
        
     
    
    
   

.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交换});

即可实现，我现在赶着下班就先不说了，明天，或者今天晚上再补充