輕松切換與jquery / html / css3無法正常工作

Question

的jsfiddle

這是我正在嘗試做的事情。 我正在嘗試使用純css和jquery例外來切換適當的類，並讓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，而css也具有基本功能，則可能會切換而不是在不受支持的瀏覽器中簡化。 我知道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');
    }
});

在刪除之前添加，然后在函數中添加分號。