티스토리 뷰

JQUERY

animate 함수(마우스 스크롤에 따라 딸려오는 요소, 이미지 슬라이더)

란텔 2014. 11. 14. 22:49

animate함수는 요소에 대하여 애니메이션 효과를 지정하여 보여줄 수 있도록 합니다.


  • animate의 함수 형태
1
2
3
4
$(선택자).animate(object);
$(선택자).animate(object, speed);
$(선택자).animate(object, speed, easing);
$(선택자).animate(object, speed, easing, callback);
cs

object는 객체타입으로 속성을 지정한다.

speed는 밀리초를 지정하여 애니메이션이 수행될 시간을 지정한다. (1000은 1초)

easing은 애니메이션의 부드러운 효과를 나타낼 때 사용한다.

callback은 콜백함수로써 애니메이션이 끝난 후 수행될 함수를 지정한다.



  • animate에 지정할 수 있는 효과 속성

opacity, top, left, right, bottom, height, width, margin, padding





+사각형 요소를  좌우로 움직이는 애니메이션 코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 <style>
        .square{
            width: 45px;
            height: 30px;
            background-color: cadetblue;
            left: 0;
            
            position: absolute;
        }
 </style>
 
 
 <script>
        $(document).ready(function () {
            dwidth=$(document).width();
            wwidth=$(window).width();
            
            $('.square').click(function(){
                swidth = $(this).width();
                sheight = $(this).height();
                dwidth = dwidth - swidth;
                
                $(this).
                        animate({left:dwidth, width:swidth*2, height:sheight*2},1000).
                        delay(2000).
                        animate({left:"-="+dwidth, width:swidth, height:sheight},1000);              
            });
            
            
            
        });
 </script>
 
 
 <div class="square"></div>
cs

animate는 단독으로 사용할 때도 있지만 위와 같이 메서드 체이닝의 형태로 사용이 가능하다.

25라인의 delay(2000)함수는 2초동안 잠시 멈추고 대기하는 기능을 하는 함수다.













+마우스 스크롤에 따라 딸려오는 요소 제작

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<html>
<head>
     <meta charset="utf-8">
    <script  src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
        window.onload = function(){ 
                var scrollTmp=0;
              $(window).scroll(function () { 
                  console.log($('.testClass').scrollTop());
                  console.log($(window).scrollTop());  //브라우저위로부터 스크롤돈 거리를 구한다.
                  console.log($('.testClass'));
                  
                  if(scrollTmp < $(window).scrollTop()){
                      moveValue = $(window).scrollTop() - scrollTmp; 
                      scrollTmp = $(window).scrollTop();
                      $('.testClass').animate({"top": "+="+moveValue+"px"},300, "linear");
                  }else{
                      moveValue = scrollTmp - $(window).scrollTop(); 
                      scrollTmp = $(window).scrollTop();
                      $('.testClass').animate({"top": "-="+moveValue+"px"},300, "linear");
                    }
                  
              });
        }
    </script>
 
<title></title>    
</head>
 
    
<body>
 
<div style="height:800px;">
<div class="testClass" style="position:relative;">
    테스트할것
</div>
</div>
    
</body>
</html>
cs





+이미지 슬라이더

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<html>
 
<head>
    <style>
        .slideWrap {
            width: 400px;
            height: 250px;
            position: relative;
            overflow: hidden;
            border-radius: 15px;
            margin-left: 480px;
        }
        
        .imageWrap {
            width: 1200px;
            position: relative;
        }
        
        .imageView {
            width: 400px;
            height: 250px;
        }
        
        .clear {
            clear: both;
        }
        
        .arrowWrap.left {
            position: absolute;
            width: 400;
            top: 100px;
            text-align: left;
        }
        
        .arrowWrap.right {
            position: absolute;
            width: 400;
            top: 100px;
            text-align: right;
        }
        
        .contentWrap {
            position: absolute;
            width: 400;
            top: 180px;
            left: 10px;
        }
        
        .contentWrap .content {
            background-color: black;
            opacity: 0.5;
            color: white;
            padding: 8px;
            font-size: 12px;
        }
    </style>
    <script src="/jqueryfile/jquery-1.11.3.js"></script>
    <script>
        $(document).ready(function () {
            //해당 선택자 태그에 data-idx속성값 적용
            $('.imageView').each(function (index, item) {
                $(this).attr('data-idx', index);
            });
            
            $('.contentWrap .content').each(function (index, item) {
                $(this).attr('data-idx', index);
            });
            //처음에는 콘텐츠 글씨 안보여줌
            $('.content').hide();
            
            //3초 단위로 slide() 한 번씩 호출
            setInterval(function () {
                slide();
            }, 3000);
            
        });
 
        function slide() {
            //애니메이션 이동 값
            idxAni = -400;
            
            //0.5초간 애니메이션 실행 세번째 인자 function은 애니메이션이 끝난 후 수행될 콜백함수
            $('.imageWrap').animate({
                left: idxAni
            }, 500, function () {
                idx = $('.imageWrap .imageView:nth-child(2n)').attr('data-idx');
                
                console.log(idx);
                //현재 해당하는 data-idx가 아닌 콘텐츠 문구는 안보여줌
                $(".content:not(.content[data-idx='+idx+'])").hide();
                //현재 해당하는 data-idx의 콘텐츠 문구를 보여줌
                $('.content[data-idx=' + idx + ']').show();
                //.imageWrap에 현재 지나가는 슬라이드를 다시 뒤에 붙여줌
                $('.imageWrap .imageView:first-child').appendTo('.imageWrap');
                $('.imageWrap').css('left', '0');
            }).delay(1000);
            //작업이 끝난 후 1초 딜레이
        }
    </script>
    <title>슬라이더 구현</title>
</head>
 
<body> IMAGE SLIDER
    <div class="slideWrap">
        <div class="imageWrap"> 
            <img class="imageView" src="/images/image1.jpg" /> 
            <img class="imageView" src="/images/image2.jpg" /> 
            <img class="imageView" src="/images/images3.jpg" /> 
        </div>
        <div class="contentWrap"> <span class="content">
                        고양이들
                    </span> <span class="content">
                        보노보노
                    </span> <span class="content">
                        해피
                    </span> 
        </div>
        <div class="arrowWrap left"> 
            <span>left</span> 
        </div>
        <div class="arrowWrap right"> 
            <span>right</span> 
        </div>
    </div>
</body>
 
</html>
cs


저작자표시 비영리 변경금지

'JQUERY' 카테고리의 다른 글

[js&jquery플러그인] alert플러그인 alertify  (0) 2014.12.03
[JAVASCRIPT] Array객체, 정렬, 객체배열 정렬  (0) 2014.07.10
[쿠키]  (0) 2014.05.26
slideDown방식으로 여러개의 메세지 출력  (0) 2014.05.08
이클립스로 Jquery개발을 위한 JSDT 함수 자동완성 플러그인 설치  (0) 2014.03.12
공유하기 링크
Comments
Related Articles more
최근에 올라온 글
최근에 달린 댓글
TAG
more
Total
Today
Yesterday