Switch toggle

переключатель в стили iPhone

by Nikita Karpov

HTML

<div id="flip_switch">
    <div class="toogleBut"></div>
</div>

CSS

#flip_switch {
  display: block;
  position: absolute;
  width: 400px;
  height: 220px;
  border-radius: 120px;
  background-color: #1b1c27;
  -moz-box-shadow: inset 0 0 10px #000000;
   	-webkit-box-shadow: inset 0 0 10px #000000;
   	box-shadow: inset 0 0 10px #000000;
}
.toogleBut {
  top: 10px;
  left: 10px;
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #444657;
  box-shadow: inset 0px 8px 0px 0px #575a6d;
}

JavaScript

var toogleMain = $('#flip_switch');
  var toogleBut = $('.toogleBut');
  var toogleBut2 = parseInt(toogleBut.css('left'));
  $(document).on("click",'.toogleBut', function() {
    if(toogleBut2 < 11) {
        $('.toogleBut').animate({'left' : '190px'}, 500,
                                function(){toogleBut2 = parseInt(toogleBut.css('left'));
                                          console.log('on');});
    }
    else {
      toogleBut.animate({left : '10px'}, 500,
                        function(){toogleBut2 = parseInt(toogleBut.css('left'));
                                  console.log('off');} );
    }
      toogleBut2 = parseInt(toogleBut.css('left'));
  });