Smooth iOS Style Toggle Switch with jQuery and CSS3
File Size: | 3.23 KB |
---|---|
Views Total: | 1958 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Just another jQuery script to create iOS style animated switch controls with smooth toggle transitions powered by CSS3.
See also:
- Creating iOS 7 Style Toggle Switches With Switchery.js
- iOS Style Checkbox Plugin with jQuery and CSS3 - iosCheckbox.js
- iOS 7 Style Smooth Toggle Buttons With jQuery and CSS3 - Checkable
How to use it:
1. Create the Html for a toggle switch.
<div class="toggle-switch toggle-on"> <div class="toggle-wrap"> <div class="toggle-bg-on"></div> </div> <div class="toggle-handler"></div> </div>
2. The CSS to style the toggle swtich & handler
.toggle-switch { width: 160px; height: 88px; position: relative; display: inline-block; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; -webkit-border-radius: 9999px; -moz-border-radius: 9999px; border-radius: 9999px; border: 1px solid #f1f1f1; cursor: pointer } .toggle-switch .toggle-handler { width: 80px; height: 80px; position: absolute; -webkit-border-radius: 80px; -moz-border-radius: 80px; border-radius: 80px; top: 0; -webkit-transition: all .2s ease-out; -moz-transition: all .2s ease-out; -o-transition: all .2s ease-out; transition: all .2s ease-out } .toggle-switch .toggle-bg-on { width: 160px; height: 80px; background-color: #78b5e6; -webkit-border-radius: 9999px; -moz-border-radius: 9999px; border-radius: 9999px; position: absolute; top: 0; left: 0; -webkit-transition: all .2s ease-out; -moz-transition: all .2s ease-out; -o-transition: all .2s ease-out; transition: all .2s ease-out; transform-origin: 0 50% }
3. Animated the toggle switch using CSS3 transitions and transforms.
.toggle-switch .toggle-bg-on { width: 160px; height: 80px; background-color: #78b5e6; -webkit-border-radius: 9999px; -moz-border-radius: 9999px; border-radius: 9999px; position: absolute; top: 0; left: 0; -webkit-transition: all .2s ease-out; -moz-transition: all .2s ease-out; -o-transition: all .2s ease-out; transition: all .2s ease-out; transform-origin: 0 50% } .toggle-switch.toggle-off .toggle-handler { background-color: #f1f1f1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); left: 0 } .toggle-switch.toggle-off .toggle-bg-on { visibility: hidden; opacity: .4; -webkit-transform: scale(.8); -moz-transform: scale(.8); -ms-transform: scale(.8); -o-transform: scale(.8); transform: scale(.8); width: 50% } .toggle-switch.toggle-on .toggle-handler { background-color: #fff; -webkit-transform: translateX(80px); -moz-transform: translateX(80px); -ms-transform: translateX(80px); -o-transform: translateX(80px); transform: translateX(80px); -webkit-box-shadow: 1px 1px 2px #ccc; -moz-box-shadow: 1px 1px 2px #ccc; box-shadow: 1px 1px 2px #ccc } .toggle-switch.toggle-on .toggle-bg-on { visibility: visible; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); opacity: 1; width: 100% }
4. Include the needed jQuery Javascript library at the bottom of the document.
<script src="//cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
5. Active the toggle switch.
(function($) { $.fn.extend({ toggleSwitch: function(){ $('.toggle-switch').on('click',function(){ if($(this).hasClass('toggle-off')){ $(this).removeClass('toggle-off').addClass('toggle-on') }else{ $(this).removeClass('toggle-on').addClass('toggle-off') } }) } }) })(jQuery) $(document).ready(function(){ $('.toggle-switch').toggleSwitch(); });
This awesome jQuery plugin is developed by leafiy. For more Advanced Usages, please check the demo page or visit the official website.