jquery 애니메이션 1. 표시기_jquery 로딩

이 시리즈의 기사는 "jQuery 1.4 Animation Techniques"를 읽은 후 요약한 것입니다. 관심 있는 친구는 원본 책을 읽어도 됩니다.
애니메이션 효과는 웹 사이트의 상호 작용 경험을 풍부하게 하는 데 없어서는 안 될 역할을 하며 사이트를 더욱 멋지고 매력적으로 만들 수 있습니다.

애니메이션을 사용하는 경우:
1. 페이지, 팝업 상자 또는 콘텐츠 영역을 표시하거나 숨길 때
2. 일부 콘텐츠가 페이지의 한 위치에서 다른 위치로 이동할 때
3. 사용자 작업에 따라 페이지의 일부 콘텐츠 상태가 변경되는 경우
4. 일부 콘텐츠가 여러 상태 간에 전환되는 경우
5. 일부 작업을 수행하거나 그림을 그릴 때 사용자에게 안내 매우 중요한 정보에 주의를 기울이는 것입니다.

애니메이션을 사용하면 안 되는 경우:
1. 특정 작업을 자주 반복해야 하는 경우
2. 장치에서 애니메이션 효과를 완전히 표시할 수 없는 경우(즉, 애니메이션이 차지함) 많은 컴퓨터 자원을 소모하고 성능에 영향을 미칩니다)
　3. 즉각적인 작동.

물론 이러한 규정이 절대적인 것은 아닙니다. 실제 상황에 따라 애니메이션 사용 여부를 결정해야 합니다. 다음은 몇 가지 체크리스트(검증 목록)입니다. 다음 옵션이 충족되는 한 귀하의 애니메이션은 가치가 있을 것입니다.
　1. 애니메이션이 타겟 고객에게 적합한지
　2. 애니메이션이 실용적인지
　3. 애니메이션이 사용자 경험을 향상시키는지
　4. 애니메이션이 적절한 속도.

다음으로 첫 번째 예제를 시작하여 애니메이션 로딩 표시기를 생성하고 이에 대한 설명과 함께 소스 코드를 직접 게시하겠습니다.

코드 복사 코드는 다음과 같습니다.

.org/1999/xhtml">
< ;head>



#loader
{
여백: 10px 0 36px 🎜>}
#loader 범위
{
디스플레이: 블록
너비: 6px;
float: 왼쪽
여백: 6px; #336633;
위치: 상대;
배경색:
}
#loader .bar-0
높이:
하단: - 20px;
}
#loader .bar-1
{
높이: 25px;
하단: -10px;
#loader .bar-2
{
높이: 35px;
여백-오른쪽: 0;

id="go" type="button" value="작업 시작" />