jQuery 효과 메서드

2022. 12. 30. 14:06

hide()메서드, show()메서드

HTML 요소를 숨기거나 표시할 수 있습니다.

선택적 속도 매개변수는 숨기기/표시 속도를 지정하며 "느림", "빠름" 또는 밀리초(ms) 값을 사용할 수 있다.

$(selector).hide(speed,callback);
$(selector).show(speed,callback);

hide()메서드 예시

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide(1000);
  });
});
</script>
</head>
<body>

<button>Hide</button>

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

</body>
</html>

toggle()메소드

요소 숨기기와 표시 사이를 전환한다.

표시된 요소는 숨겨지고 숨겨진 요소는 표시됩니다.

선택적 속도 매개변수는 "느림", "빠름" 또는 밀리초 값을 사용할 수 있습니다.

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

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").toggle();
  });
});
</script>
</head>
<body>

<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>

</body>
</html>

fading method(페이딩 메서드)

fadein() 메서드

숨겨진 요소를 페이드 인하는 데 사용한다.

선택적 속도 매개변수는 효과의 지속 시간을 지정합니다.

"느림", "빠름" 또는 밀리초 값을 사용할 수 있습니다.

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

다음 예는 fadeIn()매개변수가 다른 방법을 보여줍니다.

$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
});

fadeOut()메서드

보이는 요소를 페이드 아웃하는 데 사용됩니다.

선택적 속도 매개변수는 효과의 지속 시간을 지정합니다.

"느림", "빠름" 또는 밀리초 값을 사용할 수 있습니다.

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

다음 예는 fadeOut()매개변수가 다른 방법을 보여줍니다.

$("button").click(function(){
  $("#div1").fadeOut();
  $("#div2").fadeOut("slow");
  $("#div3").fadeOut(3000);
});

fadeToggle() 메서드

fadeToggle() 메서드는 fadeIn(), fadeOut() 메서드를 전환합니다.

선택적 속도 매개변수는 효과의 지속 시간을 지정합니다.

"느림", "빠름" 또는 밀리초 값을 사용할 수 있습니다

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

다음 예는 fadeToggle()매개변수가 다른 방법을 보여줍니다.

$("button").click(function(){
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
});

fadeTo() 메서드

fadeTo()메서드를 사용하면 지정된 불투명도(0과 1 사이의 값)로 페이딩할 수 있습니다.

필요한 속도 매개변수는 효과의 지속 시간을 지정합니다.

"느림", "빠름" 또는 밀리초 값을 사용할 수 있습니다.

$(selector).fadeTo(speed,opacity,callback);

다음 예는 fadeTo()매개변수가 다른 방법을 보여줍니다.

$("button").click(function(){
  $("#div1").fadeTo("slow", 0.15);
  $("#div2").fadeTo("slow", 0.4);
  $("#div3").fadeTo("slow", 0.7);
});

sliding method(슬라이딩 메서드)

slideDown() 메서드

slideDown()메서드는 요소를 아래로 슬라이드하는 데 사용됩니다.

다음 예제에서는 slideDown()방법을 보여줍니다.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideDown("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 down panel</div>
<div id="panel">Hello world!</div>

slideUp()메서드

요소를 슬라이드 업하는 데 사용됩니다.

다음 예제에서는 slideUp()방법을 보여줍니다.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<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>

slideToggle() 메서드

slideDown(), slideUp() 메서드를 전환합니다.

다음 예제에서는 slideToggle()방법을 보여줍니다.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<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>

애니메이션

animate() 메소드

사용자 지정 애니메이션을 만드는 데 사용됩니다.

필수 params 매개변수는 애니메이션할 CSS 속성을 정의합니다.

주의사항 : 속성이름은 카멜케이스여야된다.

$(selector).animate({params},speed,callback);

다음 예제에서는 animate()메서드의 간단한 사용을 보여 줍니다.

250px의 왼쪽 속성에 도달할 때까지 <div> 요소를 오른쪽으로 이동합니다.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("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>

여러 속성들을 조작할 수도 있다.

값 앞에 += 또는 -=를 넣어 상대값도 적용할 수 있다.

hide, shoiw, toggle 미리 정의된 값을 사용해도된다.

차례대로 큐기능을 사용해 애니매이션을 적용할 수 있다.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    var div = $("div");
    div.animate({height: '300px', opacity: '0.4'}, "slow");  //opacity는 불투명도 속성이다.
    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>

stop() 메서드

완료되기 전에 애니메이션이나 효과를 중지하는 데 사용됩니다.

stop() 메서드은 슬라이딩, 페이딩 및 사용자 정의 애니메이션을 포함한 모든 jQuery 효과 기능에 대해 작동합니다.

$(selector).stop(stopAll,goToEnd);

선택적 stopAll 매개변수는 애니메이션 대기열도 지워야 하는지 여부를 지정합니다.

선택적 goToEnd 매개변수는 현재 애니메이션을 즉시 완료할지 여부를 지정합니다.

두 매개변수 모두 기본값은 false입니다.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideDown(5000);
  });
  $("#stop").click(function(){
    $("#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>

Click to slide down panel

Hello world!

Chaining(체이닝메서드)

동일한 요소에서 여러 jQuery 명령을 차례로 실행할 수 있는 연결이라는 기술

다음 예제 css()에서는 slideUp(), 및 slideDown() 메서드를 함께 연결합니다.

"p1" 요소는 먼저 빨간색으로 변경된 다음 위로 슬라이드한 다음 아래로 슬라이드합니다.

$("#p1").css("color", "red").slideUp(2000).slideDown(2000);

//줄바꿈 체이닝 방식
$("#p1").css("color", "red")
  .slideUp(2000)
  .slideDown(2000);

https://www.w3schools.com/jquery/jquery_ref_effects.asp

jQuery Effect Methods

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

다양한 효과 메서드 참고할때 사이트 들어가보기

'Web > jQuery' 카테고리의 다른 글

TREE 구조를 이용한 jQuery 관련 메서드 (0)	2022.12.30
jQuery HTML DOM 조작 (0)	2022.12.30
콜백함수 (0)	2022.12.30
jQuery개념 (0)	2022.12.29

doornuddle