집 > 기사 > 웹 프론트엔드 > JavaScript의 jQuery 라이브러리에서 애니메이션 효과 작성 가이드_기본

JavaScript의 jQuery 라이브러리에서 애니메이션 효과 작성 가이드_기본

jquery에서 일반적으로 사용되는 애니메이션 메서드는 hide() 및 show()입니다.

$(element).hide() 이 코드는 element.css("display","none")

과 동일할 수 있습니다.

hide(시간)와 show(시간)에 이벤트를 채워 넣으면 서서히 사라지고 나타날 수 있습니다. 요소의 여러 스타일, 높이, 너비 및 불투명도를 수정할 수 있습니다.

fadeIn() 및 fadeOut()의 또 다른 메소드 세트는 hide 또는 show를 사용할 때 웹 페이지의 높이가 변경되는 반면 fadeIn 및 fadeOut은 변경되지 않는다는 점에서 hide 및 show와 다릅니다.

달러 ;; ~ .

애니메이션 방법 요약

2015813161335011.jpg (631×495)

애니메이션 대기열

(1) 요소 세트에 대한 애니메이션 효과.

a) 하나의 animate() 메서드에 여러 속성을 적용하면 애니메이션이 동시에 발생합니다.

b) 애니메이션 방식을 연쇄적으로 적용하면 애니메이션이 순차적으로 발생한다.

(2) 여러 요소 그룹에 대한 애니메이션 효과

a) 기본적으로 애니메이션은 모두 동시에 발생합니다.

b) 콜백 형태로 애니메이션 방식을 적용한 경우 콜백 순서대로 애니메이션이 발생합니다.

또한 애니메이션 메서드에서는 css() 메서드와 같은 애니메이션이 아닌 다른 메서드도 순서대로 실행되도록 하려면 이러한 메서드를 다음과 같이 작성해야 합니다. 애니메이션 메소드의 콜백 함수.

애니메이션의 예를 들어보세요:

$(“#id”).animat({left:”400px”,top:”300px”},3000,function(){


     $(this).css(“border”,”1px solid blue”);


});

애니메이션을 멈추려면 animate() 메서드 앞에 stop() 메서드

를 삽입해야 합니다.

예: $("#id").stop().animate() stop의 두 매개변수에 주의하세요.

요소가 애니메이션 상태인지 확인하는 방법:

$(element).is(“:animated”);

jQuery는 페이지의 요소에 몇 가지 동적 효과를 쉽게 추가할 수 있으며 내장된 효과를 사용하거나 자신만의 효과를 정의할 수 있습니다.

다음은 내장된 효과 방법입니다.

간단한 예:

$('h1').show();

애니메이션 효과 지속 시간 설정

$.fn.show 및 $.fn.hide의 경우 기본 지속 시간은 0입니다. 다른 효과의 기본 지속 시간은 일반적으로 400밀리초입니다. 물론 지속 시간을 직접 설정할 수도 있습니다.

$('h1').fadeIn(300);   // 300 毫秒
$('h1').fadeOut('slow'); // slow 是内建的速度常量

jQuery의 기본 속도 상수는 jQuery.fx.speeds 객체에 있습니다:

speeds: {
  slow: 600,
  fast: 200,
  // Default speed
  _default: 400
}

이 객체를 확장하고 일반적으로 사용되는 속도 값을 추가할 수도 있습니다.

jQuery.fx.speeds.blazing = 100;
jQuery.fx.speeds.turtle = 2000;

콜백 기능

애니메이션 효과가 끝난 후 일부 코드를 실행하려면 다음 애니메이션 메서드를 콜백 함수로 바꿀 수 있습니다.

$('div.old').fadeOut(300, function() {
 $(this).remove();
});

선택자에 일치하는 요소가 없으면 콜백 함수가 실행되지 않으므로 콜백 함수를 실행하기 전에 판단이 필요합니다.

var $thing = $('#nonexistent');

var cb = function() {
  console.log('done!');
};

if ($thing.length) {
  $thing.fadeIn(300, cb);
} else {
  cb();
}

맞춤 애니메이션 방법

jQuery의 $.fn.animate 메소드를 사용하여 사용자 정의 애니메이션을 확장할 수 있습니다. 이는 주로 animate 메소드를 통해 요소의 CSS 속성을 설정함으로써 달성됩니다. 요소의 CSS 속성을 설정할 때 절대값을 사용할 수 있습니다. 또는 상대값:

$('div.funtimes').animate(
  {
    left : "+=50",
    opacity : 0.25
  },
  300, // 时长
  function() { console.log('done!'); // 回调函数
});

그러나 $.fn.animate를 사용하여 사용자 정의 애니메이션 효과를 생성하는 경우 요소의 색상을 변경할 수 없습니다. 컬러 애니메이션을 만들려면 다른 컬러 플러그인을 사용해야 합니다.
애니메이션 스타일

jQuery에는 스윙과 선형의 두 가지 애니메이션 스타일이 내장되어 있습니다

$('div.funtimes').animate(
  {
    left : [ "+=50", "swing" ],
    opacity : [ 0.25, "linear" ]
  },
  300
);

애니메이션 제어

jQuery는 애니메이션 실행을 제어하는 여러 가지 방법을 제공합니다.

$.fn.stop은 현재 실행 중인 애니메이션을 중지합니다

$.fn.delay는 일정 시간 동안 애니메이션을 일시 중지합니다.

$('h1').show(300).delay(1000).hide(300);

jQuery.fx.off: 애니메이션의 전환 효과를 끕니다. 이는 지속 시간을 0으로 설정하는 것과 같습니다.

성명：

관련 기사