i made a simple switch, while i was coding i misspelled switch in the switchClass animation and wrote ‘show’ and actually it works o.O but when i correct it replace it with ‘switch’ the div just disappear when i write ‘show’ again it works again i commented the .show class in the css nothing happened still works, other thing its that doesnt works on IE on chrome, mozilla and opera works perfectly
here its the code:
html
Javascript
$(“#button”).click(function() {
$(‘.sliderGray’).switchClass(‘sliderGray’,’sliderGreen’, 250);
$(‘.switch’).switchClass(‘show’, ‘move’,250);
$(‘.sliderGreen’).switchClass(‘sliderGreen’,’sliderGray’, 250);
$(‘.move’).switchClass(‘move’, ‘switch’,250);
return false;
});
css
.sliderGray {
height: 40px;
width: 80px;
position: relative;
background-color: #bbb;
margin: 0 auto;
top: 10px;
border-radius: 7px;
-webkit-box-shadow: inset 3px 3px 10px #aaa;
box-shadow: inset 3px 3px 10px #aaa;
}
.sliderGreen {
height: 40px;
width: 80px;
position: relative;
margin: 0 auto;
top: 10px;
border-radius: 7px;
background-color: #49C93D;
-webkit-box-shadow: inset 3px 3px 10px #00B22D;
box-shadow: inset 3px 3px 10px #00B22D;
}
.switch {
position: absolute;
height: 30px;
width: 30px;
background-color: #f5f5f5;
top: 5px;
left: 5px;
border-radius: 5px;
-webkit-box-shadow: 2px 2px 5px #bbb;
box-shadow: 2px 2px 5px #bbb;
text-align: center;
vertical-align: middle;
}
.acept {
position: absolute;
top: 10px;
left: 13px;
color: #fff;
text-shadow: 1px 1px white, -1px -1px #aaa;
}
.cancel {
position: absolute;
top: 10px;
left: 48px;
color: #fff;
text-shadow: 1px 1px white, -1px -1px #aaa;
}
.move {
left: 40px;
}
