这是我正在尝试做的事情的 fiddle 。我正在尝试使用除 jquery 之外的纯 css 来切换适当的类并让 css 转换处理其余部分。我知道旧的 IE 不支持这在这一点上对我来说没问题。
发生的事情是,每当我单击链接文本时, slider 的开/关移动和缓动都很好。但是,当我按下按钮的实际 slider 部分时,它会突然移动而不会松动。这是代码:
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 在工作时支持轻松。只是当我点击按钮的特定区域时不会。
感谢您的帮助。
最佳答案
嘿,这听起来很蠢,但这是解决方案
$('.on-off').on('click', function() {
$slider = $('.slider');
if ($slider.hasClass('right')) {
$('.slider').addClass('left');
$('.slider').removeClass('right');
} else {
$('.slider').addClass('right');
$('.slider').removeClass('left');
}
});
在删除之前添加,并为您的函数添加分号。
关于javascript - 轻松切换 jquery/html/css3 在 ie 中无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23960843/