😀
😀
/*
효과 관련 함수
- hide() : 노출되어 있는 요소를 숨기는 기능을 하는 함수
형식) $("요소선택").hide(효과속도(ms), 콜백함수)
* 콜백함수 : 효과가 완료되면 실행하는 함수
==> 생략도 가능함
- show() : 숨겨져 있던 요소를 노출시키는 기능을 하는 함수
형식) $("요소선택").hide(효과속도(ms), 콜백함수)
*/
$(function() {
$("btn1").on("click", function() {
$("h2").hide(500, function() {
alert("h2태그는 사라집니다");
});
});
$("btn2").click(function() {
$("h2").show(1000);
});
});
/*
toggle() : 선택한 요소가 보이면 숨이고, 숨겨져 있으면 보이게 하는 함수
형식) $("요소선택").toggle(효과속도(ms), 콜백함수);
//토글버튼 : 한번 누르면 on 또 누르면 off
*/
$(function() {
$("btn").on("click", function() {
$("src").toggle(500);
});
});
/*
- fadeIn() : 숨겨져 있던 요소가 점점 불투명해지면서 노출이 되는 함수
형식) $("요소선택").fadeIn(효과속도, 콜백함수);
- fadeOut() : 노출이 되어 있던 요소가 점점 투명해지면서 사라지는 함수
형식) $("요소선택").fadeOut(효과속도, 콜백함수);
- fadeToggle() : 노출이 되어 있던 요소가 점점 사라지고, 사라져 있던 요소는 점점 선명해지면서 노출이 되는 함수
형식) $("요소선택").fadeToggle(효과속도, 콜백함수);
*/
$(function() {
$("img").fadeToggle(1000);
})
/*
- fadeTo() : 선택한 요소를 지정한 투명도의 값까지만 숨기는 기능
불투명도는 0부터 1사이의 값까지만 입력할 수 있다
형식) $("요소선택").fadeTo(효과속도, 불투명도, 콜백함수);
*/
$(function() {
$("img").fadeTo(1000, 0.25);
});
/*
- slideUp : 선택한 요소를 숨길 때 사용하는 함수
형식) $("요소선택").slideUp(효과속도, 콜백함수);
- slideDown : 선택한 요소를 나타낼 때 사용하는 함수
형식) $("요소선택").slideDown(효과속도, 콜백함수);
- slideToggle : 요소가 나타나 있으면 숨기고, 요소가 숨겨져있으면 나타내는 함수
형식) $("요소선택").slideToggle(효과속도, 콜백함수);
*/
$(function() {
$("img").slideToggle(500);
});
/*
- animate() : 선택자 요소에 다양한 동작(motion)효과를 적용하는 함수
형식) $("요소선택").animate({에니메이션 동작}, 효과속도, 콜백함수)
==> 에니메이션 속성에는 모션으로 적용할 속성을 CSS(스타일)를 이용해서 입력함
효과속도는 ms(1/1000) 또는 "slow", "normal", "fast" 로도 입력이 가능함
*/
$(function() {
$("h1").animate({marginLeft: "250px", width: "100px", opacity: "0.25"}, 1000, function() {
$("h1").animate({marginLeft: "0"}, 2000);
});
});
/*
- stop() : 선택한 요소에 효과 또는 애니메이션이 적용된 효과를 정시키는 함수
형식) $("요소선택").stop();
- delay() : 선택한 요소에 효과 또는 애니메이션이 적용된 효과를 지연시키는 함수
형식) $("요소선택").delay(속도);
*/
$(function() {
$("h1").animate({marginLeft: "250px"}, 3000);
$("h2").delay(2000).animate({marginLeft: "250px"}, 1000);
$(".stop").on("click", function() {
$("h1").stop();
$("h2").stop();
});
});
<body>
<h1>내용1</h1>
<h2>내용2</h2>
<button class="stop">stop</button>
</body>
😀// index() : 현재 요소가 부모의 몇번째 자식인지를 정수값으로 반환하는 함수
let btn_index = $(".zoom button").index(this);
'JQuery' 카테고리의 다른 글
| 23.02.22(탐색 선택자, 요소조작함수, 이벤트(마우스,키보드)) (0) | 2023.02.22 |
|---|---|
| 23.02.21 (선택자) (0) | 2023.02.21 |
댓글