jQuery

[jQuery] 17장 효과, 애니메이션

반응형

 

효과 : 숨기기 / 표시

 

 

  • toggle
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
img {
  width: 200px;
}
#d1 {
  border: 2px solid yellow;
  height: 200px;
}
</style>
</head>
<body>
    <div id="d1">
        <img src="../images/chi1.jpg" alt="chi">
    </div>
    <input type="button" id="toLeft" value="&lt;&lt;&lt;&lt;">
    <input type="button" id="toRight" value="&gt;&gt;&gt;&gt;">

<script src="../js/jquery-3.7.1.min.js"></script>
<script>
    // effect
    $('#d1').on('click', function(){
        // fast(200), slow(600ms), default(400ms)
        // $('img').slideToggle('fast');
        $('img').toggle('fast');
    });

</script>
</body>
</html>

 

결과 화면1 : 이미지 클릭 시 이미지 사라짐, 괄호 안에 입력하는 것에 따라 속도와 방식이 다름

 

 

 

애니메이션

 

 

  • animate
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
img {
  width: 200px;
  position: relative;
}
#d1 {
  border: 2px solid yellow;
  height: 200px;
}
</style>
</head>
<body>
    <div id="d1">
        <img src="../images/chi1.jpg" alt="chi">
    </div>
    <input type="button" id="toLeft" value="&lt;&lt;&lt;&lt;">
    <input type="button" id="toRight" value="&gt;&gt;&gt;&gt;">

<script src="../js/jquery-3.7.1.min.js"></script>
<script>

    // animate
    // 방향 기준으로 안쪽 이동시 양수(+), 바깥쪽 이동시 음수(-)
    $('#toRight').click(function(){
        // $('img').animate({left: '+=10px'}, 100);
        $('img').animate({right: '-=10px'}, 100);
    });
    $('#toLeft').click(function(){
        $('img').animate({left: '-=10px'}, 100);
        // $('img').animate({right: '+=10px'}, 100);
    });

</script>
</body>
</html>

 

결과 화면2 : 버튼 클릭하는 것에 따라 이동됨

 

 

  • css와 animate 비교
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
img {
  width: 200px;
  position: relative;
}
#d1 {
  border: 2px solid yellow;
  height: 200px;
}
</style>
</head>
<body>
    <input type="button" value="확인" id="btn3">
    <p id="p1">무궁화 꽃이 피었습니다. - CSS</p>
    <p id="p2">무궁화 꽃이 피었습니다. - animate</p>

<script src="../js/jquery-3.7.1.min.js"></script>
<script>
    $('#btn3').click(function(){
        $('#p1').css('font-size', '+=2px');
        $('#p2').animate({'font-size':'+=2px'});
    });
</script>
</body>
</html>

 

결과 화면3 : 확인 클릭 시 각자 다른 방식으로 폰트 크기가 커짐

 

 

반응형

'jQuery' 카테고리의 다른 글

[jQuery] 19장 JSON  (1) 2024.02.27
[jQuery] 18장 콜백 함수와 체이닝, 동기와 비동기  (1) 2024.02.27
[jQuery] 16장 필터링  (0) 2024.02.26
[jQuery] 15장 DOM 탐색  (0) 2024.02.26
[jQuery] 14장 trigger와 trigger Handler  (0) 2024.02.26

티스토리툴바