使用 jquery/html/css3 轻松切换无法在 ie 中正常工作

Question

JSfiddle

这是我正在尝试做的事情。我正在尝试使用除 jquery 之外的纯 css 来切换适当的类并让 css 转换处理其余部分。我知道旧的 IE 不支持这一点，这对我来说很好。

发生的情况是，当我单击链接文本时，开/关滑块会移动并放松。但是，当我点击按钮的实际滑块部分时，它会突然移动而没有缓动。代码如下：

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');
    }
})

这在 chrome/firefox 中运行得很好。只是不是 IE10/11。我正在尝试使用优雅的降级。保持轻量级，因此如果 css 可以处理它而不使用 JavaScript，它也具有基本功能，它可能会在不受支持的浏览器中切换而不是轻松。我知道 IE10/11 在工作时支持轻松。只是当我单击按钮的特定区域时不会。

感谢您的帮助。

Answer 1

嘿，这听起来很愚蠢，但这是解决方案

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

在删除之前添加，并在函数中添加分号。