Effects - Animate() 메서드 (여러가지 효과 동시 처리)

by 조쉬 posted Oct 16, 2014
?

단축키

Prev이전 문서

Next다음 문서

ESC닫기

가 크게 작게 위로 아래로 댓글로 가기 인쇄

[Animate.htm]



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>여러가지 효과 동시 처리</title>

    <style type="text/css">

        #my .hover {

            cursor:pointer;

            background-color:Yellow;

    </style>

    <script src="../js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function() {

            $("#moreRegion").hide(); // 기본값으로 숨기기

            $("span.more").click(function() {

                $("#moreRegion").animate({

                    height: '200px', width: 'show', opacity: 'show'

                }, 'slow');

                $(this).hide('fast');

            });

        });

    </script>

</head>

<body>

<div class="region">

안녕하세요. 여기는 본문입니다.

<span class="more">more...</span>

</div>

<div id="moreRegion" style="height:100px;background-color:Yellow;">

또 만나요

</div>

</body>

</html>

 



-------------------------------------------------------------------------------------

 


[실행결과]

--> 첫 화면.





--> 위의 그림에서 "more..."를 마우스로 클릭하였을 때 화면. (노란색의 "영역"과 '또 만나요' 텍스트가 출력된다.)



 

위로 아래로 댓글로 가기 인쇄