一个jq和css3的开关

第一版图片示例

第一版

1. html

   <div class="sapnGroupBorder sapnGroupBorder-blue" >
   	<div class="spanGroup">
   		<span class="spanBtn open">打开</span>
   		<span class="spanBtn gray"></span>
   		<span class="spanBtn close">关闭</span>
   	</div>
   </div>
   
   
   
   

2. css

   *{
   	margin: 0px;
   	padding: 0px;
   }
   .sapnGroupBorder{
   	width: 108px;
   	height:34px;
   	border-radius: 6px;
   	 transition: box-shadow 0.2s linear;
   	 transition: border 0.5s linear;
   	 color: white;
   	 cursor: pointer;
   	 overflow: hidden;
   	 border: 1px solid rgba(0,0,255,0.0) ;
   	 -webkit-touch-csapnGroupBorderout: none; /* iOS Safari */
   	-webkit-user-select: none; /* Chrome/Safari/Opera */
   	-moz-user-select: none; /* Firefox */
   	-ms-user-select: none; /* Internet Explorer/Edge */
   }
   .sapnGroupBorder-blue:hover{ 
   	border-color:  rgba(0,0,255,1);
   	-webkit-box-shadow:0 0 5px #337AB7;  
   	-moz-box-shadow:0 0 5px #337AB7;  
   	box-shadow:0 0 5px #337AB7; 
   }
   .sapnGroupBorder-red:hover{ 
   	  border-color:  rgba(255,0,0,1);
   	  -webkit-box-shadow:0 0 5px #FF0000;  
   	  -moz-box-shadow:0 0 5px #FF0000;  
   	  box-shadow:0 0 5px #FF0000;  
   }
   .spanGroup{
   	width: 162px;
   	height: 34px;
   }
   .spanBtn{
   	width: 54px;
   	height: 34px;
   	display: block;
   	float: left;
   	line-height: 2.2;
   	text-align: center;
   	box-sizing: border-box;
   }		
   .open{
   	background-color: #286090;
   
   }
   .gray{
   	background-color: #E0E0E0;
   
   }
   .close{
   	background-color: #D9534F;
   
   }

   
   
3. javascript

   $('.open').click(function(){	
   	$('.sapnGroupBorder').addClass('sapnGroupBorder-red');
   	$('.sapnGroupBorder').removeClass('sapnGroupBorder-blue');
   	$('.spanGroup').animate({marginLeft:'-54px'});
   });$('.close').click(function(){ 
   	$('.sapnGroupBorder').addClass('sapnGroupBorder-blue');
   	$('.sapnGroupBorder').removeClass('sapnGroupBorder-red');
   	$('.spanGroup').animate({marginLeft:'0px'});	
   })
   
   

第二版图片

第二版

1. html

   <div class="sapnGroupBorder sapnGroupBorder-blue" >
   	<div class="spanGroup">
   		<span class="spanBtn open">打开</span>
   		<span class="spanBtn gray"></span>
   		<span class="spanBtn close">关闭</span>
   	</div>
   </div>
   <div id="info"></div>

   
   
2. css

   *{
   	margin: 0px;
   	padding: 0px;
   }
   .sapnGroupBorder{
   	width: 108px;
   	height:34px;
   	border-radius: 6px;
   	transition: box-shadow 0.2s linear;
   	transition: border 0.5s linear;
   	color: white;
   	cursor: pointer;
   	overflow: hidden;
   	border: 1px solid rgba(0,0,255,0.0) ;
   	-webkit-touch-csapnGroupBorderout: none; /* iOS Safari */
   	-webkit-user-select: none; /* Chrome/Safari/Opera */
   	-moz-user-select: none; /* Firefox */
   	-ms-user-select: none; /* Internet Explorer/Edge */
   	float: left;
   }
   .sapnGroupBorder-blue:hover{ 
   	border-color:  rgba(0,0,255,1);
   	-webkit-box-shadow:0 0 5px #337AB7;  
   	-moz-box-shadow:0 0 5px #337AB7;  
   	box-shadow:0 0 5px #337AB7; 
   }
   .sapnGroupBorder-red:hover{ 
   	border-color:  rgba(255,0,0,1);
   	-webkit-box-shadow:0 0 5px #FF0000;  
   	-moz-box-shadow:0 0 5px #FF0000;  
   	box-shadow:0 0 5px #FF0000;  
   }
   .spanGroup{
   	width: 162px;
   	height: 34px;
   }
   .spanBtn{
   	width: 54px;
   	height: 34px;
   	display: block;
   	float: left;
   	line-height: 2.2;
   	text-align: center;
   	box-sizing: border-box;
   }		
   .open{
   	background-color: #286090;
   
   }
   .gray{
   	background-color: #E0E0E0;
   
   }
   .close{
   	background-color: #D9534F;
   
   }
   #info{
   	float: left;
   	height:34px;
   	line-height: 2.2;
   	margin-left: 25px;
   }

   
   
3. javascript

   function open(){
   	$('.sapnGroupBorder').addClass('sapnGroupBorder-red');
   	$('.sapnGroupBorder').removeClass('sapnGroupBorder-blue');
   	$('.spanGroup').animate({marginLeft:'-54px'});
   }
   function close(){
   	$('.sapnGroupBorder').addClass('sapnGroupBorder-blue');
   	$('.sapnGroupBorder').removeClass('sapnGroupBorder-red');
   	$('.spanGroup').animate({marginLeft:'0px'});	
   }
   
   var spanGroupVal='close';
   $('#info').text("已关闭");
   
   function activity(){
   	if(spanGroupVal=='open'){
   		open();
   		$('#info').text("已开启");
   	}else{
   		close();
   		$('#info').text("已关闭");
   	}
   }
   
   $('.open').click(function(){
   	spanGroupVal='open';
   	activity();
   });
   $('.close').click(function(){
   	spanGroupVal='close';
   	activity();
   })