轻松切换与jquery / html / css3无法正常工作

Question

JSfiddle

Here is a fiddle for what I am trying to do. I am trying to use pure css with exception of jquery to toggle the appropriate class and let the css transitions handle the rest. I know this isn't supported by old IE's which is fine with me at this point.

What is happening is for when ever I click the link text the on/off the slider moves and eases just fine. However, when I hit the actual slider portion of the button it moves over suddenly with no easing. Here is the code:

HTML

<a href="#" class="on-off">
    <span class="on">ON</span>
    <span class="off">OFF</span>
    <span class="slider right ease"></span>
</a>

CSS

.on-off {
display: inline-block;
position: relative;
padding: 5px;
background: #ff8600;
border-radius: 5px;
border: 1px solid #b8baba;
 }

 .on-off .on {
margin-right: 10px;
 }

 .slider {
position: absolute;
width: 50%;
height: 100%;
background: #fff;
z-index: 2;
border-radius: 5px;
border: 1px solid #b8baba;
 }

 .right {
top: 0;
right: 0;
 }

 .left {
top: 0;
right: 50%;
 }

.ease {
-webkit-transition: all .5s ease;
  -moz-transition:    all .5s ease;
  -ms-transition:     all .5s ease;
  -o-transition:      all .5s ease;
  transition:      all .5s ease;
 }

Javascript

$('.on-off').on('click', function() {
    $slider = $('.slider');
    if ($slider.hasClass('right')) {
        $('.slider').removeClass('right');
        $('.slider').addClass('left');
    } else {
        $('.slider').removeClass('left');
        $('.slider').addClass('right');
    }
})

This does work in chrome/firefox just fine. Just not IE10/11. I am trying to use graceful degradation. Keep things lightweight so if css can handle it not to use javascript where also it has basic functionality it just might toggle rather than ease in unsupported browsers. I know IE10/11 supports ease as it is working. just not when I click that particular area of the button.

Thanks for the help.

Answer 1

Hey this is going to sound dumb, but here's the solution

$('.on-off').on('click', function() {
    $slider = $('.slider');
    if ($slider.hasClass('right')) {
        $('.slider').addClass('left');
        $('.slider').removeClass('right');
    } else {
        $('.slider').addClass('right');
        $('.slider').removeClass('left');
    }
});

Add before you remove, and add a semicolon to your function.