transition test1

by wllai2001

HTML

<div class="wrap">
  <div class="d1 s1 item">
    d1
  </div>

  <div class="d2 s2 item">
    d2
  </div>
</div>

CSS

div.wrap{
  width: 400px;
  height: 400px;
  border: 3px solid #ccc;
  margin:auto;
  position: relative;
}
div.item {
  width: 100px;
  height: 100px;
  border: 3px solid #e37836;

  align-items: center;
  transition: all 0.5s;
  position: absolute;
}

.s1 {
  top:0px;
  left:150px
}

.s2 {
 top:150px;
 left:0px;
}

JavaScript

$('div.d1,div.d2').on('click', function() {
  var $this = $(this);
  console.log($this.attr("class"));
  if ($this[0].classList.contains("s1")) {
    $(this).removeClass('s1').addClass('s2');
  } else {
    $(this).removeClass('s2').addClass('s1');


  }

})