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

ease toggle with jquery/html/css3 not working in ie properly

本文关键字：常工作 工作 ie jquery html css3      更新时间：2023-09-26

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/ffirefox中确实很好用。只是不是IE10/11。我试图用优雅的堕落。保持轻量级，这样如果css能够处理它，就不用javascript了，因为它也有基本的功能，它可能会在不受支持的浏览器中切换而不是轻松。我知道IE10/11在工作时支持易用性。只是当我点击按钮的特定区域时没有。

谢谢你的帮助。

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

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

先添加后删除，并在函数中添加分号。

相关文章：