일반적으로 사용되는 jQuery 애니메이션 이벤트 및 애니메이션 기능 공유_jquery

일반적으로 사용되는 일부 jQuery 애니메이션 기능을 정리했으며 대화형 페이지를 만들 때 매우 유용합니다

.css('a','12px');
.css({
 a:'12px',
 b:'#fff'
});
.show();
.hide();
.toggle();
.fadeIn();
.fadeOut();
.fadeToggle();
.slideDown();
.slideUp();
.slideToggle();
.text('string');
.animate({
 a:'40px',
 b:'ccc'
},200)
.fadeTo(600,0.4);

그런 다음 실제로 인터넷의 다른 곳에서 찾은 애니메이션 기능이 작동할 수 있는 CSS 속성 몇 가지를 정리했습니다. (http://www.jb51.net/article/75510.htm) :

backgroundPosition
 borderWidth
 borderBottomWidth
 borderLeftWidth
 borderRightWidth
 borderTopWidth
 borderSpacing
 margin
 marginBottom
 marginLeft
 marginRight
 marginTop
 outlineWidth
 padding
 paddingBottom
 paddingLeft
 paddingRight
 paddingTop
 height
 width
 maxHeight
 maxWidth
 minHeight
 maxWidth
 font

글꼴 크기(animate 함수의 css 매개 변수에 지정되며 표준 CSS 속성과 다릅니다. 예를 들어 이 CSS 표준은 글꼴 크기입니다. 같은 방식으로
얼굴이 많은 경우도 마찬가지입니다)

 bottom
 left
 right
 top
 letterSpacing
 wordSpacing
 lineHeight
 textIndent
 opacity

jQuery 애니메이션 기능

jQuery 애니메이션 기능은 세 가지 범주로 나뉩니다.

1. 기본 애니메이션 기능: 투명 그라데이션과 슬라이딩 효과 모두 일반적으로 사용되는 애니메이션 효과입니다.
2. 슬라이딩 애니메이션 기능: 슬라이딩 효과만 사용합니다.
3. 페이드 애니메이션 기능: 페이드 효과만 사용하세요.

1. 기본 애니메이션 기능:

1.쇼()

숨겨진 일치 요소를 표시합니다. 이것은 'show(speed, [callback])'의 애니메이션이 아닌 버전입니다. 선택한 요소가 표시되면 이 메서드는 아무 것도 변경하지 않습니다. 이 메소드는 hide() 메소드를 통해 요소가 숨겨졌는지 또는 CSS에 display:none이 설정되어 있는지에 관계없이 작동합니다.
예: 모든 단락 표시 $("p").show()

2. 표시(속도,[콜백])

일치하는 요소를 우아한 애니메이션으로 표시하고 선택적으로 표시가 완료된 후 콜백 함수를 반환합니다. 일치하는 각 요소의 높이, 너비 및 불투명도는 지정된 속도에 따라 동적으로 변경될 수 있습니다.
예: 느린 애니메이션을 사용하여 600밀리초 동안 지속되는 숨겨진 단락을 표시합니다. $("p").show(600)

3. 숨기기()

표시 요소를 숨깁니다. 이것은 'hide( speed, [callback] )'의 애니메이션이 아닌 버전입니다. 선택한 요소가 숨겨져 있으면 이 메서드는 아무 것도 변경하지 않습니다.
예: 모든 단락 숨기기, $("p").hide()

4. 숨기기(속도,[콜백])

우아한 애니메이션으로 일치하는 모든 요소를 ​​숨기고 선택적으로 표시가 완료된 후 콜백 함수를 트리거합니다. 지정된 속도에 따라 일치하는 각 요소의 높이, 너비 및 불투명도를 동적으로 변경할 수 있습니다. jQuery1.3에서는 패딩과 여백도 애니메이션화되어 효과가 더 매끄러워집니다.
예: 단락을 천천히 숨기려면 600ms를 사용합니다. $("p").hide("slow");

5. 토글

요소의 표시 상태를 전환합니다. 요소가 표시되면 숨김으로 전환하고, 요소가 숨겨져 있으면 표시로 전환합니다.
예: 모든 단락의 표시 상태를 전환합니다. $("p").toggle()

6. 토글(스위치)

절화 요소의 표시 상태는 스위치 매개변수를 기반으로 합니다(true는 표시되고 false는 숨겨짐). switch가 true로 설정되면 show() 메서드가 호출되어 일치하는 요소가 표시됩니다. switch가 false로 설정되면 hide()가 호출되어 요소를 숨깁니다.
예: 모든 단락의 표시 상태를 전환합니다. varflip=0;$("button").click(function(){$("p").toggle(flip %2==0);});

7. 토글(속도,[콜백])

일치하는 모든 요소를 ​​우아한 애니메이션으로 전환하고 선택적으로 표시가 완료된 후 콜백 함수를 트리거합니다. 지정된 속도에 따라 일치하는 각 요소의 높이, 너비 및 불투명도를 동적으로 변경합니다. jquery1.3에서는 패딩 및 여백에도 애니메이션이 포함되어 효과가 더 매끄러워집니다.

예: 200ms를 사용하여 단락 표시 상태를 빠르게 전환한 다음 $("p").toggle("fast",function(){alert("hello!") 대화 상자를 표시합니다. ;});

2. 슬라이딩 애니메이션 기능

1. SlideDown(속도,[콜백])

높이 변경(아래로 증가)을 통해 일치하는 모든 요소를 ​​동적으로 표시하고, 표시가 완료된 후 선택적 위치에 콜백 함수를 보냅니다. 이 애니메이션 효과는 요소의 높이만 조정하며 일치하는 요소가 "슬라이딩" 방식으로 표시되도록 할 수 있습니다. jQuery 1.3에서는 상단 및 하단 패딩과 여백도 애니메이션화되어 효과가 더 매끄러워집니다.
예: 600ms를 사용하여 단락을 천천히 아래로 슬라이드 $("p").slideDown("slow");

2. 슬라이드업(속도,[콜백])

높이를 변경(위로 감소)하고 선택적으로 숨기기가 완료된 후 콜백 함수를 트리거하여 일치하는 모든 요소를 ​​동적으로 숨깁니다.
예: 600ms 안에 단락을 천천히 위로 밀어 올립니다. $("p").slideUp("slow");

3. 슬라이드토글(속도,[콜백])

높이 변경을 통해 일치하는 모든 요소의 가시성을 전환하고 선택적으로 전환이 완료된 후 콜백 함수를 트리거합니다.
예: 600ms 내에 단락을 천천히 위 또는 아래로 슬라이드 $("p").slideToggle("slow");

3. 페이딩 기능 페이딩

1. fadeIn(속도,[콜백])

투명도 변경을 통해 일치하는 모든 요소의 페이드인 효과를 얻고 선택적으로 애니메이션이 완료된 후 콜백 함수를 호출할 수 있습니다. 이 애니메이션은 요소의 불투명도만 조정합니다. 즉, 일치하는 모든 요소의 높이와 너비는 변경되지 않습니다.
예: 단락을 천천히 페이드 인하려면 600ms를 사용합니다. $("p").fadeIn("slow");

2. fadeOut(속도,[콜백])

불투명도 변경을 통해 일치하는 모든 요소의 페이드 아웃 효과를 얻고 선택적으로 애니메이션이 완료된 후 콜백 함수를 트리거합니다.
예: 600ms를 사용하여 단락을 천천히 페이드 아웃합니다. $("p").fadeOut("slow");

3. fadeTo(속도,불투명도,[콜백])

把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选的出发一个回调函数。
例如：用600ms缓慢将段落的透明度调整到0.66，大约2/3的可见度，$("p").fadeTo("slow",0.66)

四、自定义动画函数Custom

1、animate(params,[duration],[easing],[callback])用于创建自定义动画的函数。这个函数的关键在于制定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性（如height、top或opacity)。注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left。而每个属性的值表示这个样式属性到多少是动画结束。如果是一个数值，样式属性就会从当前的值渐变到指定的值。如果使用的是hide、show、toggle这样的字符串值，则会就该属性调用默认的动画形式。

例如：点击按钮后div元素的几个不同属性一同变化，

$("#go").click(function(){
$("#block").animate({
width:"90%",height:"100%",fontSize:"10em",borderWidth:10
},1000);
});

2、stop([clearQueue],[gotoEnd])

停止所有在指定元素上正在运行的动画。如果队列中有等待执行的动画(并且clearQueue没有设为true)，他们将被马上执行clearQueue(Boolean):如果设置成true，则清空队列。可以立即结束动画。gotoEnd(Boolean):让当前正在执行的动画立即完成，并且重设show和hide的原始样式，调用回调函数等。

例如：点击Go之后开始动画,点Stop之后会在当前位置停下来:

// 开始动画
$("#go").click(function(){
$(".block").animate({left: '+200px'}, 5000);
});
// 当点击按钮后停止动画
$("#stop").click(function(){
$(".block").stop();
});
[javascript] view plaincopy
$(document).ready(function(){ 
$(".box h3").toggle(function(){ 
$(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow"); 
$(this).addClass("arrow"); 
return false; 
},function(){ 
$(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow"); 
$(this).removeClass("arrow"); 
return false; 
}); 
});