Front-End/J-Query

jQuery Effects

jQuery Effects - Hide and Show - 효과(이벤트랑 다름)


jQuery hide() and show() - btn 선택 숨김 / btn 선택 보여줌


$("#hide").click(function(){  // 도큐먼트 준비되면
    $("p").hide();            // p태그 선택하면 숨김
});

$("#show").click(function(){  // 도큐맨트 준비되면
    $("p").show();            // p태그 선택 보여줌
});
<button id="hide">Hide</button>
<button id="show">Show</button>

$(selector).hide(speed,callback);    // 숨기는 속도 조절 가능

$(selector).show(speed,callback);    // 보여주는 속도 조절 가능

$("button").click(function(){
    $("p").hide(1000);    // 1000 = 1초
});

jQuery toggle() - 토글

$("button").click(function(){ // btn 클릭
    $("p").toggle();    // 선택자P 클릭하면 보여주고 사라지게 해줌
});
$(selector).toggle(speed,callback);

<button>Toggle between hiding and showing the paragraphs</button>

<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>

$(selector).toggle(speed,callback);    // selector선택자 속도 조절 및 롤백

// 참고 제인쿼리 임펙터 라이브 러리
https://www.w3schools.com/jquery/jquery_ref_effects.asp
!!!가져다 쓰면 된다@@@

jQuery Effects - Fading - 

시각적효과 *

부드럽게 사라지거나 보여주거나 하는 기능


jQuery Fading Methods - 종류

With jQuery you can fade an element in and out of visibility.

jQuery has the following fade methods:

  • fadeIn()
  • fadeOut()
  • fadeToggle()
  • fadeTo()
jQuery fadeIn() Method - 보여짐
$(selector).fadeIn(speed,callback); // 선택자 .메소드명(fadeIn),(속도, 되돌리기)

Ex)
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#div1").fadeIn();            // 기본값으로 페이드인
        $("#div2").fadeIn("slow");   // 느리게
        $("#div3").fadeIn(3000);     // 속도 지정
    });
});
</script>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>

jQuery fadeOut() Method - 사라짐

$(selector).fadeOut(speed,callback);
$("button").click(function(){
    $("#div1").fadeOut();        //사라짐
    $("#div2").fadeOut("slow");  // 느리게 옵션
    $("#div3").fadeOut(3000);    // 속도 지정    3000은 3초
});
<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>

jQuery fadeToggle() Method - 클릭에 따라 On Off

$(selector).fadeToggle(speed,callback);

$("button").click(function(){
    $("#div1").fadeToggle();        // On Off
    $("#div2").fadeToggle("slow");    // 느리게
    $("#div3").fadeToggle(3000);    //속도 지정
});
<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>

jQuery fadeTo() Method - 투명도

$(selector).fadeTo(speed,opacity,callback); // opacity 투명도 0으로 갈수록 투명 (0과1지정)
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#div1").fadeTo("slow", 0.15);   // 투명도
        $("#div2").fadeTo("slow", 0.4);    // 투명도
        $("#div3").fadeTo("slow", 0.7);    //투명도
    });
});
</script>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
jQuery Effects - Sliding - 줄 내림

jQuery Sliding Methods - 종류

  • slideDown()
  • slideUp()
  • slideToggle()

jQuery slideDown() Method

$(selector).slideDown(speed,callback);
<script> 
$(document).ready(function(){
    $("#flip").click(function(){        // 선택자 #flip
        $("#panel").slideDown("slow");  // 선택자 panel
    });
});
</script>
<style> 
#panel, #flip {
    padding: 5px;
    text-align: center;
    background-color: #e5eecc;
    border: solid 1px #c3c3c3;
}

#panel {
    padding: 50px;       
    display: none;    // 디스플레이 안보이게 css 지정
}
</style>
<div id="flip">Click to slide down panel</div>    // 클릭하면
<div id="panel">Hello world!</div>                   // 패널 내려와~~~

jQuery slideUp() Method - 줄 올림

$(selector).slideUp(speed,callback);
<script> 
$(document).ready(function(){
    $("#flip").click(function(){
        $("#panel").slideUp("slow");
    });
});
</script>
<style> 
#panel, #flip {
    padding: 5px;
    text-align: center;
    background-color: #e5eecc;
    border: solid 1px #c3c3c3;
}

#panel {
    padding: 50px;
}
</style>
</head>
<body> 
<div id="flip">Click to slide up panel</div>
<div id="panel">Hello world!</div>
</body>
</html>

jQuery slideToggle() Method - On Off

$(selector).slideToggle(speed,callback);
<script> 
$(document).ready(function(){
    $("#flip").click(function(){
        $("#panel").slideToggle("slow");
    });
});
</script>

<style> 
#panel, #flip {
    padding: 5px;
    text-align: center;
    background-color: #e5eecc;
    border: solid 1px #c3c3c3;
}

#panel {
    padding: 50px;
    display: none;
}
</style>
</head>
<body> 
<div id="flip">Click to slide the panel down or up</div>
<div id="panel">Hello world!</div>
</body>
</html>

jQuery Effects - Animation 

- 애니메이션

jQuery Animations - The animate() Method

Systex
$(selector).animate({params},speed,callback);
<script> 
$(document).ready(function(){
    $("button").click(function(){         //btn을 클릭하면    // 파라메타
        $("div").animate({left: '250px'});// div선택자를.animate({left:'250px'})이동
    });
});
</script> 
</head>
<body>

<button>Start Animation</button>

<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>

<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>

</body>
</html>
jQuery animate() - Manipulate Multiple Properties - 여러가지를 속성값 준다
<script> 
$(document).ready(function(){
    $("button").click(function(){    
        $("div").animate({
            left: '250px',    // 왼쪽으로
            opacity: '0.5,    // 투명도
            height: '150px',  // 높이
            width: '150px'    // 넓이
        });
    });
});
</script> 
</head>
<body>

<button>Start Animation</button>

<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</body>
</html>
jQuery animate() - Using Relative Values 상대적으로 
값 지정
This is done by putting += or -= in front of the value:    // 상대적으로 + 주고 - 준다
<script> 
$(document).ready(function(){
    $("button").click(function(){
        $("div").animate({
            left: '250px',           // 상대적으로 값 지정
            height: '+=150px',  // 상대적으로 값 지정
            width: '+=150px'    // 상대적으로 값 지정
        });
    });
});
</script> 
</head>
<body>

<button>Start Animation</button>

<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>

<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>

</body>
</html>

jQuery animate() - Using Pre-defined Values - 사전에 정의된 벨루값을 줄수있다

<script> 
$(document).ready(function(){
    $("button").click(function(){
        $("div").animate({        // 애니메이터
            height: 'toggle'      // 높가 토글값으로 On Off 한다
        });
    });
});
</script> 
</head>
<body>

<p>Click the button multiple times to toggle the animation.</p>

<button>Start Animation</button>

<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>

<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>

</body>
</html>

jQuery animate() - Uses Queue Functionality - 애니메이션 연결

<script> 
$(document).ready(function(){
    $("button").click(function(){
        var div = $("div");        // 선택자 div를
        div.animate({height: '300px', opacity: '0.4'}, "slow");    // 높이
        div.animate({width: '300px', opacity: '0.8'}, "slow");     // 가로
        div.animate({height: '100px', opacity: '0.4'}, "slow");    // 높이
        div.animate({width: '100px', opacity: '0.8'}, "slow");    // 가로
    });
});
</script> 
</head>
<body>
<button>Start Animation</button>

<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>

<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>

</body>
</html>
//핵심 : 순서대로 움직인다
애니메이션 연결
<script> 
$(document).ready(function(){
    $("button").click(function(){
        var div = $("div");  
        div.animate({left: '100px'}, "slow");    // 옆으로 움직이고
        div.animate({fontSize: '3em'}, "slow");  // 폰트를 키운다
    });
});
</script> 
</head>
<body>

<button>Start Animation</button>

<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>

<div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>

</body>
</html>

jQuery Stop Animations - 효과 중지

jQuery stop() Method - 정지

$(selector).stop(stopAll,goToEnd);    
파라미터 : 모두 정지, goToEnd 
기본 파라미터 : false

<script> 
$(document).ready(function(){
    $("#flip").click(function(){      //선택자 flip 클릭하면
        $("#panel").slideDown(5000);  //panel.slideDown(5초 동안 내려온다)
    });
    $("#stop").click(function(){      // stop 클릭하면
        $("#panel").stop();           // 정지한다.
    });
});
</script>
 
<style> 
#panel, #flip {
    padding: 5px;
    font-size: 18px;
    text-align: center;
    background-color: #555;
    color: white;
    border: solid 1px #666;
    border-radius: 3px;
}

#panel {
    padding: 50px;
    display: none;
}
</style>
</head>
<body>
 
<button id="stop">Stop sliding</button>

<div id="flip">Click to slide down panel</div>
<div id="panel">Hello world!</div>

</body>
</html>

jQuery Callback Functions - 효과가 끝났을때 실행되게 하는거

jQuery Callback Functions

다 숨겨지고 나서 다음줄 실행하는 방법이 Callback
모두 사라지고 나서 alert 뛰움
Example with Callback
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").hide("slow", function(){    // 콜백 사용 방법 function() 작성 {} 한줄 끝나고 한줄 시작          alert("The paragraph is now hidden");
        });
    });
});
</script>
</head>
<body>
<button>Hide</button>
<p>This is a paragraph with little content.</p>
</body>
</html>

이건 다 사라기지 전에 alert 뛰움
Example without Callback
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").hide(1000);                    // 콜백 없음
        alert("The paragraph is now hidden");
    });
});
</script>
</head>
<body>
<button>Hide</button>
<p>This is a paragraph with little content.</p>
</body>
</html>

jQuery - Chaining - 명령어를 여러개 연결해서 사용

jQuery Method Chaining
<script>
$(document).ready(function(){
    $("button").click(function(){        // (function() 콜백
        $("#p1").css("color", "red").slideUp(2000).slideDown(2000);    // 명령어 묶음
    });
});
</script>
</head>
<body>

<p id="p1">jQuery is fun!!</p>

<button>Click me</button>

</body>
</html>

문법이 엄격하지 않아 한줄 한줄 라인으로 씀
<script>
$(document).ready(function(){
    $("button").click(function(){     // (function() 콜백 명령어가 끝날때까지 기다린다
        $("#p1").css("color", "red")  // 라인
            .slideUp(2000)            // 라인
            .slideDown(2000);         // 라인
    });
});
</script>
</head>
<body>
<p id="p1">jQuery is fun!!</p>
<button>Click me</button>
</body>
</html>


'Front-End > J-Query' 카테고리의 다른 글

jQuery Misc  (0) 2017.07.06
jQuery AJAX  (0) 2017.07.06
jQuery Traversing  (0) 2017.07.06
jquery HTML  (0) 2017.07.06
jQuery Tutorial  (0) 2017.07.01
,

최근 댓글

최근 트랙백

알림

이 블로그는 구글에서 제공한 크롬에 최적화 되어있고, 네이버에서 제공한 나눔글꼴이 적용되어 있습니다.

태그

링크

ㆍ 지메이트 시스템즈
ㆍ 헝그리하트의 블로그
ㆍ 언제나 휴일
ㆍ 함께서울 - 블스님 명강의
ㆍ 개발자를 위한 레시피 :: 개발자를 위한 레시피
ㆍ lhh3520's 공간박스
ㆍ 줄없는 연습장
ㆍ Let's Smile : )
ㆍ 같이 살자
ㆍ :: 8Kun' ARCHIVE :: :: 8Kun' A…

카운터

Today :
Yesterday :
Total :

티스토리툴바