CSS 이동

CSS 이동 구현

1 예시 1: 마우스오버로 동작

<style>
.box1 {
  position: absolute;
  left: 0;
  width: 150px; height: 150px;
  background: red;
  transition: 1.5s;
}
.box1:hover {
  left: 300px;
}
</style>

<div class='box1'></div>

2 예시 2: 버튼 클릭으로 동작

<style>
.box1 {
  position: absolute;
  left: 0;
  width: 150px; height: 150px;
  background: red;
  transition: 1.5s;
}
</style>

<button id='btn-move'>박스 이동</button>
<div class='box1'></div>

<script src="//code.jquery.com/jquery.min.js"></script>
<script>
$(function() {
  $("#btn-move").click(function() {
    $(".box1").css('left', '300px');
  });
});
</script>

3 같이 보기

• CSS transition