Custom toggle switch with pure HTML, CSS and JQuery with smooth transition

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#outer").click(function(){
if($("#inner").css('margin-left') == '1px')
{
$("#inner").css('margin-left','34px');
$("#inner").html('ON');
}
else
{
$("#inner").css('margin-left','1px');
$("#inner").html('OFF');
}
});
});
</script>
<style>
#outer, #inner {
cursor:pointer;
border-radius:5px;
text-align: center;
color:#FFF;
height:18px;
transition-property: margin-left;
transition-duration: 0.25s;
transition-timing-function: linear;
}
</style>
</head>
<body>
<div id="outer" style="width:70px;background: rgb(188, 188, 188);"> <div id="inner" style="margin-left:1px;width:35px;background: rgb(0, 102, 153);">OFF</div> </div>
</body>
</html>

sfdcbox.com