jQuery 애니메이션 애니메이션 방법 사용 소개

맞춤형 애니메이션을 만드는 기능.
반환 값: jQuery animate(params, [duration], [easing], [callback])

"hide", "show" 또는 "toggle"과 같은 string 값을 사용하는 경우 이 속성이 됩니다. 기본 애니메이션 형식을 호출합니다. paramsOptions 스타일 속성과 해당 값을 애니메이션 속성 및 최종 값으로 포함하는 패키지

세트 ​​

params 객체 {}, 참고: 지정된 모든 속성은 margin-left 대신 marginLeft와 같은 낙타 형식이어야 합니다. , "hide", "show" 또는 "toggle"과 같은 문자열 값을 사용하면 해당 속성에 대해 기본 애니메이션 형식이 호출됩니다.

duration(선택 사항) 미리 결정된 세 가지 속도("느림", "보통" 또는 "빠름") 중 하나의 문자열 또는 애니메이션 기간을 나타내는 밀리초 값(예: 1000)

easing(선택 사항)
문자열
사용할 삭제 효과 이름(플러그인 지원 필요) 기본적으로 jQuery는 "선형" 및 "스윙"을 제공합니다.콜백(선택 사항) 기능 애니메이션이 완료되면 실행되는 함수

0. 애니메이션 중지

if($('.swaplist,.mainlist').is(':animated')){
    $('.swaplist,.mainlist').stop(true,true);
}

애니메이션 예:

1. 버튼을 클릭하면 p 요소의 여러 속성이 함께 변경됩니다.

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

2. 지정된 요소를 왼쪽과 오른쪽으로 이동합니다

$("#right").click(function () {
    $(".block").animate({ left: '+50px' }, "slow");
});
$("#left").click(function () {
    $(".block").animate({ left: '-50px' }, "slow");
});

3. 600밀리초 이내에 단락 전환 높이 및 투명도

$("p").animate({
    height: 'toggle', opacity: 'toggle'
}, "slow");

4. 500밀리초를 사용하여 단락을 왼쪽 위치 50으로 이동하고 완전히 명확하게 표시합니다(투명도는 1)

$("p").animate({
    left: 50, opacity: 'show'
}, 500);

5. 표시 전환 및 숨기기

$(".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; 
    }); 
});

//滚动焦点
$(window).scroll(function () {              //当前窗口的滚动事件
var winTop = $(window).scrollTop();     //获取当前窗口的大小
var objTop = $("#obj1").offset().top;   //获取当前对象的x坐标
});

위 내용은 jQuery 애니메이션 애니메이션 방법 사용 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!