[英]ease toggle with jquery/html/css3 not working in ie properly
这是我正在尝试做的事情。 我正在尝试使用纯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可以轻松运行。 只是当我单击按钮的特定区域时才不会。
谢谢您的帮助。
嘿,这听起来很蠢,但这是解决方案
$('.on-off').on('click', function() {
$slider = $('.slider');
if ($slider.hasClass('right')) {
$('.slider').addClass('left');
$('.slider').removeClass('right');
} else {
$('.slider').addClass('right');
$('.slider').removeClass('left');
}
});
在删除之前添加,然后在函数中添加分号。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.