[jQuery] animate

UI만을 위한 jQuery 라이브러리도 존재합니다.

원하는 버전의 라이브러리를 다운로드하고 사용할 수 있습니다.

html문서입니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="index.js"></script>
    <style>
        body{
            background-color : white;

        }
        .inner {
            font-size : 100px;
        }

    </style>
</head>
<body>

    <header class="page-header" role="banner">
        <h1>hello~ jQuery</h1>
    </header>
    <div class="page-main" role="main">
        <div id="typo">
            <div class="inner">Creative jQuery</div>
        </div>
    </div>

</body>
</html>

animate 기본 문법은 다음과 같습니다.

선택자. animate({속성:값, 속성:값} , 시간, 이징 , 다른 할 일)

제이쿼리 이징 , linear, swing + ui라이브러리다운 시 여러 가지 이 징가 능

//id : typo안에 inner을 먼저선택하기
//on메서드를 생략하고 click이벤트가 바로올 수 있습니다.
   $(function(){
    $('#typo .inner').click(function(){

        $(this).animate({opacity:0,fontSize:'0px'},1500 ,'swing');

    });

   })

img에 mouseover일 때 animate 적용하기

<header class="page-header" role="banner">
    <h1>hover_img_caption</h1>
</header>

<div class="page-main" role="main">

    <div id="images">
        <h2>IMAGES</h2>
        <div class="inner clearfix">
            //P태그를 자식태그전부 absoulte
            <p>
                <img src="img/01_img.jpg">
                <strong>Hummingbird</strong>
                <span></span>
            </p>
            <p><img src="img/02_img.jpg"><strong>Sitta</strong><span></span></p>
            <p><img src="img/03_img.jpg"><strong>Bee-eater</strong><span></span></p>
        </div>
    </div>

</div>

변수가 javascript에 내장된 변수가 겹치는 것을 생각해 $기호를 붙여주었습니다.

find와 filter

find는 하위 요소 중 특정 요소를 선택할 때 사용합니다.

filter는 특정 부분집합에서 특정한 요소를 선택할 때 사용합니다.

밑의 코드는 p태그라는 집합에서 nth-child로써 필터링해 1,2,3번째 p태그를 선택하고 있습니다.

모든 animate는 이전의 하던 일을 멈추는. stop(true)를 써주어야 하는데 true는 기본값이어서 생략 가능합니다.

animate는 비동기로 실행되므로 큐에 싸여있는 animate를 지워주는 clearQueue를 사용할 수 있지만 그렇게 되면 현재 animate 또한 멈추게 됩니다.

$(function(){
    var $duration =300;
    var $image = $('#images p');

    //첫번째 캡션,span animate()
    //두번쨰 p태그 선택 $image.filter(':nth-child(2)')
     $image.filter(':nth-child(1)').mouseover(function(){

        $(this).find('span, strong').stop().animate({opacity:1},$duration);

    })
    .mouseout(function(){

        $(this).find('span,strong').stop().animate({opacity:0},$duration);

    });


    $image.filter(':nth-child(2)').mouseover(function(){

         $(this).find('span').stop().animate({opacity:1},$duration);
         $(this).find('strong').stop().animate({opacity:1, left :'0%'},$duration);
    })
    .mouseout(function(){

         $(this).find('span').stop().animate({opacity:0},$duration);
         $(this).find('strong').stop().animate({opacity:0, left :'-200%'},$duration);
    });

     $image.filter(':nth-child(3)').mouseover(function(){

             $(this).find('span').stop().animate({opacity:1},$duration);
             $(this).find('strong').stop().animate({opacity:1, bottom :0},$duration);
             $(this).find('img').stop().animate({top :'-40px'},$duration);
        })
        .mouseout(function(){

             $(this).find('span').stop().animate({opacity:1},$duration);
             $(this).find('strong').stop().animate({opacity:1, bottom :'-80px'},$duration);
             $(this).find('img').stop().animate({top :'0px'},$duration);
        });

});

모든 코드는 https://github.com/yusungill

yusungill - Overview

yusungill has 2 repositories available. Follow their code on GitHub.

github.com