강력한 JQuery - 애니메이션 효과

지난 블로그에서 우리는 jquery의 기초 지식인 강력한 JQuery(하나)--기초편을 이야기했는데 웹 개발자로서 웹 페이지의 애니메이션 효과는 없어서는 안 된다. 본 블로그는 jquery의 애니메이션 효과의 실현에 중심을 두었다.
애니메이션의 효과는 캡처해서 여러분에게 보여줄 수 없기 때문에 여러분은 스스로 실험할 수 있습니다.
1. 숨김 표시
1. jquery에서 Hide() 및 show() 방법으로 HTML 요소를 숨기고 표시합니다.

<span style="font-size:18px;">$("#hide").click(function(){
  $("p").hide();
});

$("#show").click(function(){
  $("p").show();
});
</span>

2. toggle () 방법을 통해hide () 와 show () 방법을 전환합니다.

<span style="font-size:18px;">$("button").click(function(){
  $("p").toggle();
});</span>

2. 페이드 인 페이드 아웃
fadeIn()은 숨겨진 요소를 페이드인할 때 사용됩니다.

<span style="font-size:18px;">$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
});</span>

fadeOut() 방법은 보이는 요소를 페이드아웃하는 데 사용됩니다.

<span style="font-size:18px;">$("button").click(function(){
  $("#div1").fadeOut();
  $("#div2").fadeOut("slow");
  $("#div3").fadeOut(3000);
});
</span>

fadeToggle () 방법은fadeIn ()과fadeOut () 방법 사이를 전환할 수 있습니다.

<span style="font-size:18px;">$("button").click(function(){
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
});
</span>

미끄럼
슬라이딩 및 위쪽 디스플레이 숨기기와 페이드 인/아웃은 기본적으로 동일합니다.
방법
속뜻
slideDown  
원소를 아래로 미끄러뜨리는 데 사용
slideUp
원소를 위로 미끄러뜨리는 데 사용
slideToggle
원소가 아래로 미끄러지면 슬라이드Toggle()은 위로 미끄러질 수 있습니다.원소가 위로 미끄러지면 슬라이드Toggle()은 아래로 미끄러질 수 있습니다.
4. 사용자 정의 애니메이션
사용자 정의 애니메이션은 간단하면서도 복잡하다고 할 수 있다.간단하게 말하면 그것은 단지 하나의 함수만 필요로 하는데, 복잡함은 이 함수가 n여 개의 속성을 추가할 수 있다는 것을 가리킨다.
1. 문법:
$(selector).animate({params},speed,callback);
필수 params 매개변수는 애니메이션을 형성하는 CSS 속성을 정의합니다.
선택할 수 있는 speed 매개 변수는 효과의 시간을 정합니다.그것은 "slow", "fast"또는 밀리초 값을 얻을 수 있습니다.
선택할 수 있는 콜백 매개 변수는 애니메이션이 끝난 후에 실행되는 함수 이름입니다.
예를 들면 다음과 같습니다.

$("button").click(function(){
  $("div").animate({left:'250px'});
}); 

팁: 기본적으로 모든 HTML 요소는 정적 위치를 가지며 이동할 수 없습니다.
위치를 조작하려면 먼저 요소의 CSS 포지션 속성을relative,fixed 또는absolute로 설정하는 것을 기억하세요!
2, jQuery animate() - 여러 속성 작업

<span style="font-size:18px;">$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
}); 
</span>

3. jQuery animate() - 대기열 기능 사용

<span style="font-size:18px;">$("button").click(function(){
  var 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");
});
</span>

5. 애니메이션 중지
jQuery stop() 메서드
jQuery stop() 방법은 애니메이션이나 효과를 완료하기 전에 중지하는 데 사용됩니다.
stop () 방법은 슬라이딩, 페이드 아웃, 사용자 정의 애니메이션을 포함한 모든 jQuery 효과 함수에 적용됩니다.
구문:
    $(selector).stop(stopAll,goToEnd);
설명:
선택적 stopAll 매개 변수는 애니메이션 큐를 지워야 하는지 여부를 결정합니다.기본값은false입니다. 즉, 활성화된 애니메이션만 정지하고, 대기열에 배열된 애니메이션은 뒤로 실행할 수 있습니다.
선택할 수 있는 goToEnd 매개 변수는 현재 애니메이션을 즉시 완성할지 여부를 규정합니다.기본값은 false입니다.
따라서 기본적으로 stop () 은 선택한 요소에 지정된 현재 애니메이션을 지웁니다.

<span style="font-size:18px;">$("#stop").click(function(){
  $("#panel").stop();
});</span>

마지막: jquery가 우리에게 제공한 몇 가지 애니메이션은 간단하고 기능이 강하다. jquery가 있으면 자바스크립트에서 매우 골치 아픈 애니메이션 제작이 매우 쉬워진다. jQuery가 있으면 당신은 순간적으로 다른 사람(jQuery를 모르는 사람들)의 눈에 애니메이션 고수가 될 것이다!