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

  <div class="sliderGray">

    <div class="acept" aria-hidden="true" data-icon="&#xe004;"></div>
    <div class="cancel" aria-hidden="true" data-icon="&#xe005;"></div>

    <div id="button" class="switch"></div>
  </div>

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;
}