jQuery 루프 애니메이션 및 구성 요소 size_jquery를 가져오는 방법

이 기사의 예에서는 jQuery 루프 애니메이션 방법과 구성 요소 크기를 얻는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

1. 서문

1. jQuery의 animate() 메소드를 사용하면 사용자 정의 애니메이션을 만들 수 있습니다.

animate() 메서드는 거의 모든 CSS 속성을 다룰 수 있지만 animate()를 사용할 때는 모든 속성 이름을 Camel 표기법으로 작성해야 합니다. 예를 들어 padding-left 대신 paddingLeft를 사용해야 하고 marginRight를 사용해야 합니다. margin-right 대신에 기다려주세요. 또한 핵심 jQuery 라이브러리에는 컬러 애니메이션이 포함되어 있지 않습니다. 컬러 애니메이션을 생성해야 하는 경우 jquery.com에서 컬러 애니메이션 플러그인을 다운로드해야 합니다.

2. jQuery를 통해 요소 및 브라우저 창의 크기를 쉽게 처리할 수 있습니다.
jQuery는 요소와 브라우저 창의 크기를 얻기 위해 다음 속성을 제공합니다.

2. 기본 목표

아래 그림과 같습니다.

웹 페이지에 두 개의 버튼을 만듭니다. 하나의 버튼은 표시 상태와 숨김 상태 사이에서 구성 요소의 크기를 전환할 수 있고, 하나의 버튼은 시작과 중지 상태 사이에서 루프 애니메이션을 전환할 수 있습니다

Simple JQ에는 애니메이션 재생을 일시 중지하고 시작하는 기능이 없습니다. 이를 완료하려면 jQuery Pause 플러그인을 다운로드해야 합니다. 이 예에서 루프 애니메이션은 JavaScript를 통해서만 제어되므로 각 일시 중지는 루프 본문이 한 번 완료될 때만 중단될 수 있으며 임의 위치에서 일시 중지 및 시작하는 기능은 달성할 수 없습니다.

3. 제작과정

다음은 웹페이지의 코드 전체이며, 나중에 부분적으로 설명하겠습니다.

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

 
 
    <머리> 
         
         
         
        <스크립트> 
var 간격; 
var 나는 = 0; 
var j = 0; 
함수 divanimate() { 
    $(".d_class").animate( {왼쪽 : " =100px"}, 500); 
    $(".d_class").animate( {top : " =100px" }, 500); 
    $(".d_class").animate( {왼쪽 : "-=100px"}, 500); 
    $(".d_class").animate( {top : "-=100px" }, 500); 
} 
함수 사이클() { 
    디바니메이트(); 
    간격 = setInterval("divanimate()", 2000); 
} 
$(document).ready(function() { 
    $("#stop").click(function() { 
        나 ; 
        if (i % 2 != 0)
            주기(); 
        그렇지 않으면
            ClearInterval(간격); 
    }); 
    $("#show").click(function() { 
        j ; 
        if (j % 2 != 0) { 
            var txt = ""; 
            txt = "

높이: " $("#d_id").height() "px>"; 
            txt = "크기: " $("#d_id").width() "px

"; 
            $("#d_id").html(txt); 
        } else { 
            var txt = ""; 
            $("#d_id").html(txt); 
        } 
    }); 
}) 
     
     
 
    <본문> 
        <버튼 id="표시"> 
            显示/隐藏方块尺寸
         
        <버튼 id="중지"> 
            开始/停止动画的循环
         
       

            스타일="너비: 100px; 높이: 100px; 배경색: #000; 위치: 절대; 상단: 50px; 색상: #FFF; 왼쪽:50px;">