이 기사에서는 다양한 JQuery 메서드를 사용하여 애니메이션을 생성하는 방법을 살펴봅니다.
hide() 그리고 show()hide() 메서드는 단순히 스타일을 인라인으로 설정합니다. display: none 선택한 항목에 대해. 반대로 show() 메서드는 표시 속성을 복원합니다.
예를 보자:
<script>
$(document).ready(function(){
// Hide displayed paragraphs
$(".hide-btn").click(function(){
$("p").hide();
});
// Show hidden paragraphs
$(".show-btn").click(function(){
$("p").show();
});
});
</script>첫 번째 경우 버튼을 클릭하면 단락이 숨겨집니다(hide-btn), 두 번째 경우에는 버튼(show-btn).
기간 매개 변수를 지정하여 일정 기간 동안 표시 및 숨기기 효과를 애니메이션으로 만들 수도 있습니다.
사전 문자열 중 하나를 사용하여 기간을 지정할 수 있습니다.defi귀염둥이 'slow' o 'fast', 또는 더 높은 정확도를 위해 밀리초 단위로; 값이 높을수록 애니메이션이 느려집니다.
<script>
$(document).ready(function(){
// Hide displayed paragraphs with different speeds
$(".hide-btn").click(function(){
$("p.normal").hide();
$("p.fast").hide("fast");
$("p.slow").hide("slow");
$("p.very-fast").hide(50);
$("p.very-slow").hide(2000);
});
// Show hidden paragraphs with different speeds
$(".show-btn").click(function(){
$("p.normal").show();
$("p.fast").show("fast");
$("p.slow").show("slow");
$("p.very-fast").show(50);
$("p.very-slow").show(2000);
});
});
</script>문자열 사전defi니타 'fast' 200밀리초의 지속 시간을 나타내는 반면 문자열은 'slow' 600밀리초의 기간을 나타냅니다.
다음과 같은 기능을 지정할 수 있습니다. callback 메서드 완료 후 실행 show() 또는 dell ' hide()
<script>
$(document).ready(function(){
// Display alert message after hiding paragraphs
$(".hide-btn").click(function(){
$("p").hide("slow", function(){
// Code to be executed
alert("The hide effect is completed.");
});
});
// Display alert message after showing paragraphs
$(".show-btn").click(function(){
$("p").show("slow", function(){
// Code to be executed
alert("The show effect is completed.");
});
});
});
</script>jQuery 메서드 toggle() 항목이 처음에 표시되면 숨겨지는 방식으로 항목을 표시하거나 숨깁니다. 반대로 숨겨져 있으면 표시됩니다(거의 가시성이 토글됨).
<script>
$(document).ready(function(){
// Toggles paragraphs display
$(".toggle-btn").click(function(){
$("p").toggle();
});
});
</script>마찬가지로 매개변수를 지정할 수 있습니다. duration 방법을 위해 toggle(), 방법과 같이 보이는 것과 숨겨진 것 사이의 전환을 애니메이션화하는 방식으로 show() e hide()
<script>
$(document).ready(function(){
// Toggles paragraphs with different speeds
$(".toggle-btn").click(function(){
$("p.normal").toggle();
$("p.fast").toggle("fast");
$("p.slow").toggle("slow");
$("p.very-fast").toggle(50);
$("p.very-slow").toggle(2000);
});
});
</script>마찬가지로 다음 함수를 지정할 수도 있습니다. callback 방법을 위해 toggle().
<script>
$(document).ready(function(){
// Display alert message after toggling paragraphs
$(".toggle-btn").click(function(){
$("p").toggle(1000, function(){
// Code to be executed
alert("The toggle effect is completed.");
});
});
});
</script>fadeIn() e fadeOut()jQuery 메서드를 사용할 수 있습니다. fadeIn()e fadeOut() HTML 요소를 표시하거나 숨기고 불투명도를 점진적으로 높이거나 낮추고 페이딩 효과를 만듭니다.
<script>
$(document).ready(function(){
// Fading out displayed paragraphs
$(".out-btn").click(function(){
$("p").fadeOut();
});
// Fading in hidden paragraphs
$(".in-btn").click(function(){
$("p").fadeIn();
});
});
</script>다른 jQuery 효과 방법과 마찬가지로 방법에 대한 기간 또는 속도 매개변수를 선택적으로 지정할 수 있습니다. fadeIn()e fadeOut(), 페이드 지속 시간을 제어하기 위해. 사전 문자열 중 하나를 사용하여 기간을 지정할 수 있습니다.defi귀염둥이 'slow' o 'fast', 또는 밀리초 단위; 값이 높을수록 애니메이션이 느려집니다.
<script>
$(document).ready(function(){
// Fading out displayed paragraphs with different speeds
$(".out-btn").click(function(){
$("p.normal").fadeOut();
$("p.fast").fadeOut("fast");
$("p.slow").fadeOut("slow");
$("p.very-fast").fadeOut(50);
$("p.very-slow").fadeOut(2000);
});
// Fading in hidden paragraphs with different speeds
$(".in-btn").click(function(){
$("p.normal").fadeIn();
$("p.fast").fadeIn("fast");
$("p.slow").fadeIn("slow");
$("p.very-fast").fadeIn(50);
$("p.very-slow").fadeIn(2000);
});
});
</script>방법의 효과 fadeIn() / fadeOut() 그것은 show() / hide(), 그러나 방법과 달리 show() / hide(), 전자는 대상 요소의 불투명도만 애니메이션하고 크기는 애니메이션하지 않습니다.
또한 당신은 기능을 지정할 수 있습니다 callback 메소드 완료 후 실행 fadeIn() / fadeOut().
<script>
$(document).ready(function(){
// Display alert message after fading out paragraphs
$(".out-btn").click(function(){
$("p").fadeOut("slow", function(){
// Code to be executed
alert("The fade-out effect is completed.");
});
});
// Display alert message after fading in paragraphs
$(".in-btn").click(function(){
$("p").fadeIn("slow", function(){
// Code to be executed
alert("The fade-in effect is completed.");
});
});
});
</script>fadeToggle()jQuery 메서드 fadeToggle() 요소가 처음에 표시되면 흐려지도록 불투명도에 애니메이션을 적용하여 선택한 요소를 표시하거나 숨깁니다. 숨겨진 경우 페이드 아웃됩니다(즉, 페이드 효과 토글).
<script>
$(document).ready(function(){
// Toggles paragraphs display with fading
$(".toggle-btn").click(function(){
$("p").fadeToggle();
});
});
</script>메서드에 대한 수명 매개변수를 지정할 수도 있습니다. fadeToggle() 방법에 관해서는 fadeIn() / fadeOut(), 페이드 애니메이션의 지속 시간 또는 속도를 제어합니다.
<script>
$(document).ready(function(){
// Fade Toggles paragraphs with different speeds
$(".toggle-btn").click(function(){
$("p.normal").fadeToggle();
$("p.fast").fadeToggle("fast");
$("p.slow").fadeToggle("slow");
$("p.very-fast").fadeToggle(50);
$("p.very-slow").fadeToggle(2000);
});
});
</script>fadeToggle() 메서드에는 함수를 지정하는 기능도 있습니다. callback.
<script>
$(document).ready(function(){
// Display alert message after fade toggling paragraphs
$(".toggle-btn").click(function(){
$("p").fadeToggle(1000, function(){
// Code to be executed
alert("The fade-toggle effect is completed.");
});
});
});
</script>fadeTo()jQuery 메서드 fadeTo() 방법과 비슷하다 fadeIn(), 그러나 방법과 달리 fadeIn(), 방법 fadeTo() 특정 수준의 불투명도까지 요소를 혼합할 수 있습니다.
$(selector).fadeTo(speed, opacity, callback);필수 매개변수 opacity 0과 1 사이의 숫자일 수 있는 대상 요소의 최종 불투명도를 지정합니다. 매개변수 duration o speed 애니메이션 페이드 기간을 지정하는 이 메서드에도 필요합니다.
<script>
$(document).ready(function(){
// Fade to paragraphs with different opacity
$(".to-btn").click(function(){
$("p.none").fadeTo("fast", 0);
$("p.partial").fadeTo("slow", 0.5);
$("p.complete").fadeTo(2000, 1);
});
});
</script>slideUp() e slideDown()jQuery 메서드 slideUp() e slideDown() HTML 요소의 높이를 점진적으로 줄이거나 늘려(즉, 위 또는 아래로 스크롤) HTML 요소를 숨기거나 표시하는 데 사용됩니다.
<script>
$(document).ready(function(){
// Slide up displayed paragraphs
$(".up-btn").click(function(){
$("p").slideUp();
});
// Slide down hidden paragraphs
$(".down-btn").click(function(){
$("p").slideDown();
});
});
</script>다른 jQuery 효과 메서드와 마찬가지로 메서드에 대해 지속 시간 또는 속도 매개 변수를 선택적으로 지정할 수 있습니다. slideUp() e slideDown() 슬라이드 애니메이션의 지속 시간을 제어합니다. 사전 문자열 중 하나를 사용하여 기간을 지정할 수 있습니다.defi귀염둥이 'slow' o 'fast', 또는 밀리초 단위; 값이 높을수록 애니메이션이 느려집니다.
<script>
$(document).ready(function(){
// Sliding up displayed paragraphs with different speeds
$(".up-btn").click(function(){
$("p.normal").slideUp();
$("p.fast").slideUp("fast");
$("p.slow").slideUp("slow");
$("p.very-fast").slideUp(50);
$("p.very-slow").slideUp(2000);
});
// Sliding down hidden paragraphs with different speeds
$(".down-btn").click(function(){
$("p.normal").slideDown();
$("p.fast").slideDown("fast");
$("p.slow").slideDown("slow");
$("p.very-fast").slideDown(50);
$("p.very-slow").slideDown(2000);
});
});
</script>메서드 완료 후 실행할 콜백 함수를 지정할 수도 있습니다. slideUp() o slideDown().
<script>
$(document).ready(function(){
// Display alert message after sliding up paragraphs
$(".up-btn").click(function(){
$("p").slideUp("slow", function(){
// Code to be executed
alert("The slide-up effect is completed.");
});
});
// Display alert message after sliding down paragraphs
$(".down-btn").click(function(){
$("p").slideDown("slow", function(){
// Code to be executed
alert("The slide-down effect is completed.");
});
});
});
</script>slideToggle()jQuery 메서드 slideToggle() 요소가 처음 표시되면 위로 스크롤되도록 높이를 애니메이션하여 선택한 요소를 표시하거나 숨깁니다. 숨겨진 경우 아래로 스크롤됩니다. 즉, 방법 간을 전환합니다. slideUp() e slideDown().
<script>
$(document).ready(function(){
// Toggles paragraphs display with sliding
$(".toggle-btn").click(function(){
$("p").slideToggle();
});
});
</script>마찬가지로 메서드에 대한 수명 매개변수를 지정할 수 있습니다. slideToggle() 왔다 slideUp() e slideDown().
<script>
$(document).ready(function(){
// Slide Toggles paragraphs with different speeds
$(".toggle-btn").click(function(){
$("p.normal").slideToggle();
$("p.fast").slideToggle("fast");
$("p.slow").slideToggle("slow");
$("p.very-fast").slideToggle(50);
$("p.very-slow").slideToggle(2000);
});
});
</script>마찬가지로 메서드에 대한 콜백 함수를 지정할 수도 있습니다. slideToggle().
<script>
$(document).ready(function(){
// Display alert message after slide toggling paragraphs
$(".toggle-btn").click(function(){
$("p").slideToggle(1000, function(){
// Code to be executed
alert("The slide-toggle effect is completed.");
});
});
});
</script>animate()jQuery 메서드 animate() 사용자 지정 애니메이션을 만드는 데 사용됩니다. 방법 animate() 다음과 같은 숫자 CSS 속성을 애니메이션하는 데 사용됩니다. width, height, margin, padding, opacity, top, left 등. 그러나 다음과 같은 비숫자 속성 color o background-color 기본 jQuery 기능을 사용하여 애니메이션을 적용할 수 없습니다.
메서드의 기본 구문 animate() 그것은 다음과 같습니다:
$(selector).animate({ properties }, duration, callback);방법 매개변수 animate() 다음과 같은 의미가 있습니다.
'slow' o 'fast', 또는 밀리초 단위; 값이 높을수록 애니메이션이 느려집니다.아래는 방법의 간단한 예입니다. animate() 버튼을 클릭하면 이미지가 원래 위치에서 오른쪽으로 300픽셀 이동합니다.
<script>
$(document).ready(function(){
$("button").click(function(){
$("img").animate({
left: 300
});
});
});
</script>방법을 사용하여 요소의 여러 속성을 한 번에 함께 애니메이션화할 수도 있습니다. animate(). 모든 속성은 지연 없이 동시에 애니메이션화되었습니다.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
width: "300px",
height: "300px",
marginLeft: "150px",
borderWidth: "10px",
opacity: 0.5
});
});
});
</script>jQuery의 연결 기능을 사용하여 대기열에서 요소의 여러 속성을 하나씩 개별적으로 애니메이션화할 수도 있습니다.
다음 예제는 요소의 이전 애니메이션이 완료되면 각 애니메이션이 시작되는 대기 중이거나 연결된 jQuery 애니메이션을 보여줍니다. 향후 기사에서 연결 기능을 볼 것입니다.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box")
.animate({width: "300px"})
.animate({height: "300px"})
.animate({marginLeft: "150px"})
.animate({borderWidth: "10px"})
.animate({opacity: 0.5});
});
});
</script>또한 가능하다. defi애니메이션 속성에 대한 상대 값을 마무리합니다. 값이 접두사로 지정된 경우 += o -=, 속성의 현재 값에서 지정된 숫자를 더하거나 빼서 대상 값을 계산합니다.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
top: "+=50px",
left: "+=50px",
width: "+=50px",
height: "+=50px"
});
});
});
</script>숫자 값 외에도 각 속성은 문자열을 허용할 수 있습니다. 'show', 'hide' e 'toggle'. 현재 값에서 초기 값으로 또는 그 반대로 속성을 애니메이션하려는 상황에서 매우 유용합니다.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
width: 'toggle'
});
});
});
</script>stop()jQuery 메서드 stop() 완료되기 전에 현재 실행 중인 jQuery 애니메이션 또는 선택한 요소에 대한 효과를 중지하는 데 사용됩니다.
메서드의 기본 구문 stop() jQuery는 다음과 같이 주어질 수 있습니다:
$(selector).stop(stopAll, goToEnd);위 구문의 매개변수는 다음과 같은 의미를 갖습니다.
false, 이는 현재 애니메이션만 중지되고 대기열에 있는 나머지 애니메이션은 나중에 실행됨을 의미합니다.false.다음은 방법을 보여주는 간단한 예입니다. stop() 버튼 클릭으로 애니메이션을 시작하고 중지할 수 있는 실제 동작에서.
<script>
$(document).ready(function(){
// Start animation
$(".start-btn").click(function(){
$("img").animate({left: "+=150px"}, 2000);
});
// Stop running animation
$(".stop-btn").click(function(){
$("img").stop();
});
// Start animation in the opposite direction
$(".back-btn").click(function(){
$("img").animate({left: "-=150px"}, 2000);
});
// Reset to default
$(".reset-btn").click(function(){
$("img").animate({left: "0"}, "fast");
});
});
</script>다음은 버튼을 다시 클릭하면 이 방법의 또 다른 예입니다.Slide Toggle” 애니메이션을 시작한 후 완료되기 전에 저장된 시작 지점의 반대 방향으로 즉시 애니메이션이 시작됩니다.
<script>
$(document).ready(function(){
// Kill and toggle the current sliding animation
$(".toggle-btn").on("click", function(){
$(".box").stop().slideToggle(1000);
});
});
</script>애니메이션 호버 효과를 생성하는 동안 발생할 수 있는 가장 일반적인 문제 중 하나는 마우스 커서를 빠르게 배치하고 제거할 때 여러 애니메이션이 대기하는 것입니다. 왜, 이런 상황에서 mouseenter gli mouseleave 이벤트는 애니메이션이 완료되기 전에 빠르게 시작됩니다. 이 문제를 피하고 훌륭하고 부드러운 호버 효과를 생성하려면 다음을 추가할 수 있습니다. stop(true, true)다음과 같이 메서드 체인에 추가합니다.
<script>
$(document).ready(function(){
$(".box").hover(function(){
$(this).find("img").stop(true, true).fadeOut();
}, function(){
$(this).find("img").stop(true, true).fadeIn();
});
});
</script>JavaScript 문은 한 줄씩 실행됩니다. 그러나 jQuery 효과가 완료되는 데 약간의 시간이 걸리므로 이전 효과가 계속 실행되는 동안 다음 줄의 코드가 실행될 수 있습니다. 이를 방지하기 위해 jQuery는 각 효과 메서드에 대한 콜백 함수를 제공합니다.
콜백 함수는 효과가 완료되면 실행되는 함수입니다. 콜백 함수는 효과의 메서드에 대한 인수로 전달되며 일반적으로 마지막 메서드 인수로 나타납니다. 예를 들어 jQuery 효과 메서드의 기본 구문은 slideToggle() 다음과 같이 지정할 수 있는 콜백 함수:
$(selector).slideToggle(duration, callback);명령문을 배치한 다음 예를 고려하십시오. slideToggle()e alert()다른 하나 옆에 하나. 이 코드를 사용하면 슬라이드 토글 효과가 완료될 때까지 기다리지 않고 토글 버튼을 클릭한 직후에 경고가 나타납니다.
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").slideToggle("slow");
alert("The slide toggle effect has completed.");
});
});
</script>다음은 명령문을 삽입한 이전 예제의 수정된 버전입니다. alert() 메서드에 대한 콜백 함수 내부 slideToggle(). 이 코드를 시도하면 슬라이드 토글 효과가 완료되면 경고 메시지가 나타납니다.
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").slideToggle("slow", function(){
// Code to be executed once effect is complete
alert("The slide toggle effect has completed.");
});
});
});
</script>마찬가지로, 당신은 할 수 있습니다 defi다음과 같은 다른 jQuery 효과 메서드에 대한 콜백 함수를 완료합니다. show(), hide(), fadeIn(), fadeOut(), animate()등
<script>
$(document).ready(function(){
$("button").click(function(){
$("h1, p").slideToggle("slow", function(){
// Code to be executed once effect is complete
alert("The slide toggle effect has completed.");
});
});
});
</script>위의 샘플 코드를 시도하면 동일한 경고 메시지가 항목당 한 번씩 두 번 표시됩니다. <h1> e <p>, 활성화 버튼을 클릭한 후.
BlogInnovazione.it
지난 월요일, Financial Times는 OpenAI와의 계약을 발표했습니다. FT는 세계적 수준의 저널리즘에 라이선스를 부여합니다…
수백만 명의 사람들이 스트리밍 서비스 비용을 지불하고 월간 구독료를 지불합니다. 당신은…
Coveware by Veeam은 계속해서 사이버 강탈 사건 대응 서비스를 제공할 것입니다. Coveware는 법의학 및 교정 기능을 제공할 것입니다…