jQuery 애니메이션 효과 코드 공유

1. 표시, 숨기기
jQuery에 표시되는 방법은:.show(), 숨기는 방법은:.hide().파라미터가 없을 때, 단지 경직된 내용과 숨겨진 내용일 뿐이다.

$('.show').click(function(){ //   
  $('#box').show();     //  
});
$('.hide').click(function(){  //   
  $('#box').hide();     // 
});

있다show () 및.Hide () 방법은 밀리초 (1000밀리초는 1초) 로 속도를 제어하는 매개 변수를 전달할 수 있습니다.그리고 그 안에는 균형이 커지고 작아지며 투명도 변환이 풍부하다.

$('.show').click(function(){ 
  $('#box').show(1000);    //  1   
}); $('.hide').click(function(){ 
  $('#box').hide(1000);    //  1   
});

jQuery는 밀리초를 직접 사용하여 속도를 제어하는 것 외에 세 가지 미리 설정된 속도 매개 변수 문자열을 제공합니다: 슬로우,normal,fast, 각각 600밀리초, 400밀리초와 200밀리초에 대응합니다.

$('#box').show('slow');   //600   
$('#box').show('normal');  //400   
$('#box').show('fast');   //200   

주의: 밀리초를 전달하든 미리 설정된 문자열을 전달하든 잘못 전달하거나 빈 문자열을 전달하면 됩니다.그러면 기본값: 400밀리초를 사용합니다.
사용show () 및.Hide () 의 리셋 함수로 열 애니메이션 효과를 실현할 수 있습니다.
(1) 함수 이름으로 자신을 호출

$('.show').click(function(){
  $('#box').show('slow',function showspan(){
    $(this).next().show('slow',showspan);
  });
})

(2)arguments를 사용합니다.callee 익명 함수 자동 호출

$('.show').click(function(){
  $('#box').show('slow',function(){
    $(this).next().show('slow',arguments.callee);
  });
})

우리는 사용하고 있다.show () 및.hide () 때 단추 전환 작업이 필요하면 조건 판단이 필요합니다.그리고 jQuery는 유사한 기능을 제공하는 독립적인 방법을 제공합니다.toggle().

$('.toggle').click(function(){
  $(this).toggle('slow'); 
});

2. jQuery를 미끄러지고 말아서 원소의 높이를 바꾸는 방법을 제공합니다.slideUp()、.slideDown() 및.slideToggle().말 그대로 위로 수축(권동)과 아래로 전개(미끄럼).

$('.down').click(function(){  // 
  $('#box').slideDown(); 
});
$('.up').click(function(){   // 
   $('#box').slideUp(); 
});
$('.toggle').click(function(){  // 
  $('#box').slideToggle(); 
});

참고: 슬라이딩, 롤업 효과는 표시, 숨기기 효과와 마찬가지로 같은 매개 변수를 가지고 있습니다.
3. 페이드 인
jQuery는 투명도 변화에 특화된 방법을 제공합니다.fadeIn() 및.fadeOut () 은 페이드, 페이드를 나타냅니다. 물론 자동 전환 방법도 있습니다.fadeToggle().

$('.in').click(function(){    // 
  $('#box').fadeIn('slow');  
});
$('.out').click(function(){    // 
  $('#box').fadeOut('slow'); 
});
$('.toggle').click(function(){  // 
  $('#box').fadeToggle(); 
});

위의 세 가지 투명도 방법은 0에서 100, 또는 100에서 0까지만 가능합니다. 만약 우리가 지정한 값을 설정하려면 방법이 없습니다.jQuery는 이 문제를 해결하기 위해 제공했다.fadeTo() 메서드입니다.

$('.toggle').click(function(){ 
  $('#box').fadeTo('slow',0.33);   //0.33   33%
});

ps: 값 0 ~ 1, 대응 백분율
4. 애니메이션 사용자 정의
jQuery는 우리가 사용하는 몇 가지 간단한 고정 애니메이션을 제공합니다.그러나 때때로 이런 간단한 애니메이션은 우리의 더욱 복잡한 수요를 만족시킬 수 없다.이때 jQuery는 하나를 제공했다.animate () 방법으로 사용자 정의 만들기
의미 애니메이션은 더욱 복잡하고 변화가 많은 요구를 만족시킨다.

$('.animate').click(function(){ 
  $('#box').animate({ 
    'width':'300px', 
    'fontSize':'50px', 
    'opacity':0.5 
  }); 
});

주의: 하나의 CSS 변화는 하나의 애니메이션 효과이다. 위의 예에서 이미 네 개의 CSS 변화가 있고 다중 애니메이션 동기화 운동의 효과를 실현했다.
필수 매개 변수는 하나입니다. 키 값이 CSS의 스타일 변화에 대한 객체입니다.그리고 두 개의 선택할 수 있는 매개 변수는 각각 속도와 리셋 함수이다.

$('.animate').click(function(){
  $('#box').animate({
    'width':'500px',
    'height':'400px',
  },2000,function(){
    alert(' ')；
  })；
})；

현재 위치까지 우리는 모두 고정된 위치에서 움직이지 않는 애니메이션을 만들었다.동작 상태의 변위 애니메이션을 구현하려면 사용자 정의 애니메이션을 사용하고 CSS의 절대 포지셔닝 기능을 결합해야 합니다.

$('.animate').click(function(){ 
  $('#box').animate({ 
    'top':'300px',   //  CSS   
    'left':'200px' 
  }); 
});

ps: 먼저 css에 참조물을 설정하고 절대 위치를 정해야 합니다
사용자 정의 애니메이션에서는 매번 동작을 시작할 때마다 초기 위치나 초기 상태여야 하며, 때로는 현재 위치나 상태를 통해 애니메이션을 하려고 합니다.jQuery는 사용자 정의 애니메이션의 누적, 축소 기능을 제공합니다.

$('.animate').click(function(){ 
    $('#box').animate({ 
      left:'+=100px',
      width:'+=100px',
      height:'+=100px'
  }); 
});

5. 대열 애니메이션 방법
이전에 우리는 이미 대열 애니메이션을 실현할 수 있었다. 만약 같은 요소라면 순서나 연결 호출을 할 수 있다.다른 원소라면 리셋 함수를 사용할 수 있습니다.그러나 때때로 대열 애니메이션이 너무 많아서 리셋 함수의 가독성이 크게 떨어진다.이를 위해 jQuery는 열 애니메이션에 전문적인 방법을 제공합니다.
//연결은 순서대로 정렬할 수 없습니다
$('#box').slideUp('slow').slideDown('slow').css('background','orange');
주의: 애니메이션 방법의 경우, 연결은 순서대로 줄을 설 수 있습니다.css () 방법은 애니메이션 방법이 아닙니다. 처음에 줄에 전해지기 전에그러면 애니메이션 방법의 리셋 함수로 해결할 수 있다.

// ， .css() .slideDown() 
$('#box').slideUp('slow').slideDown('slow',function({
  $(this).css('background','orange');              
});

그러나 이렇게 하면 줄지어 애니메이션이 많을 때 가독성이 떨어질 뿐만 아니라 원래의 애니메이션 방법이 뚜렷하지 않다.그래서 우리의 생각은 모든 조작이 자신의 독립적인 방법이라는 것이다.그러면 jQuery는 리셋 함수와 유사한 방법을 제공합니다.queue().

// .queue() 
$('#box').slideUp('slow').slideDown('slow').queue(function(){
  $(this).css('background','orange');
 });

지금, 우리는 계속 있고 싶다.queue () 방법 뒤에 숨겨진 애니메이션을 추가하면 실행할 수 없습니다.이것은.queue () 특성으로 인해 발생합니다.해결 방법: jQuery의.queue () 의 리셋 함수는 매개 변수를 전달할 수 있습니다. 이 매개 변수는next 함수입니다. 마지막에 이next () 방법을 호출하면 열 애니메이션을 연결할 수 있습니다.

//  next   $('#box').slideUp('slow').slideDown('slow').queue(function(next{
  $(this).css('background','orange'); 
  next(); 
}).hide('slow');

ps:.queue () 방법은 현재 애니메이션 개열의 길이를 얻을 수 있는 기능이 하나 더 있습니다. (구체적으로 설명하지 않음)
jQuery는 열을 정리하는 기능도 제공합니다.clearQueue().그것을 한 줄의 리셋 함수에 넣거나.queue () 방법에서 나머지 실행을 위한 열을 제거할 수 있습니다.

//  
$('#box').slideDown('slow',function(){
  $(this).clearQueue()
});

6. 애니메이션 관련 방법
실행 중인 애니메이션을 중지해야 할 때가 많습니다. jQuery는 이것을 제공합니다.stop () 메서드.그것은 두 개의 선택할 수 있는 매개 변수가 있다.stop(clearQueue,gotoEnd);clearQueue는 실행되지 않은 애니메이션 열을 비우는지, gotoEnd는 실행 중인 애니메이션을 마지막 상태로 직접 이동하는지 여부를 나타내는 부울 값을 전달합니다.

$('.animate').click(function(){ 
  $('#box').animate({ 
    'left':'300px' },1000); 
  $('#box').animate({
    'top':'300px' },1000);
  $('#box').animate({
    'width':'300px' },1000);
  $('#box').animate({ 
    'height':'300px' },1000);
});
  $('.stop').click(function(){
    $('#box').stop(true,false); 
  });

//주의: 첫 번째 매개 변수는 열 애니메이션을 취소할지 여부를 나타냅니다. 기본값은false입니다.매개 변수가true이면 열 애니메이션이 있을 때 뒤에 있는 열 애니메이션을 취소합니다.두 번째 인자는 현재 애니메이션의 끝에 도달했는지 여부를 나타냅니다. 기본값은false입니다.매개 변수가true이면 멈추면 바로 끝에 도착합니다.자체 복제 환경을 제공합니다.
때때로 애니메이션을 실행하거나 줄을 서서 애니메이션을 실행할 때, 운동을 하기 전에 지연 실행이 필요합니다. jQuery는 이를 제공합니다.delay () 메서드.이 방법은 애니메이션을 하기 전에 지연을 설정할 수도 있고, 줄 애니메이션 중간에 추가할 수도 있다.

//  1  ，  1   
$('.animate').click(function(){
  $('#box').delay(1000).animate({ 
    'left':'300px' },1000); 
  $('#box').animate({ 
    'bottom':'300px' },1000); 
  $('#box').delay(1000).animate({
    'width':'300px' },1000); 
  $('#box').animate({
    'height':'300px' },1000);
  });

arguments.callee가 어떤 함수에서 실행되는지, 그것은 어떤 함수를 대표합니다.일반적으로 익명 함수에 쓰인다.익명 함수에서는 때때로 자신을 호출해야 하지만 익명 함수이기 때문에 이름이 없고 조정할 수 없다.이때arguments를 사용할 수 있습니다.익명 함수 대신 callee

// ， 
$('#box').slideToggle('slow',function(){
  $(this).slideToggle('slow',arguments.callee); 
});

$.fx.off 속성은 모든 애니메이션 효과를 닫을 수 있습니다.
$.fx.off=true;//기본값은 false
모두 이해 완료.
위에서 말한 것은 여러분께 소개해 드린 jQuery 애니메이션 효과 코드 공유입니다. 여러분께 도움이 되기를 바랍니다.