jQuery에서 animate의 여러 사용법과 주의사항
- 高洛峰원래의
- 2016-12-28 09:31:441428검색
1. 애니메이션 구문 구조
animate(params,speed,callback)
params: {key1:value1,key2:value2}
와 같은 스타일 속성과 값을 포함하는 매핑 speed: 속도 매개변수 [선택]
콜백: 애니메이션이 완료되면 실행되는 함수 [선택]
2. 간단한 애니메이션 커스터마이징
하나 사용하자 div를 클릭하여 페이지에서 가로로 떠다니는 효과를 얻는 방법을 보여주는 간단한 예입니다.
<style>
#cube{
position:relative;/* 不加这句元素不能动 */
width:30px;
height:30px;
background:red;
cursor:pointer;
}
</style>
<body>
<div>
<div id="cube"></div>
</div>
<script>
$(function(){
$("#cube").click(function(){
$(this).animate({left:"100px"},2000)
})
})
</script>
요소를 이동하려면 left 속성을 변경하세요. 요소의 위쪽, 오른쪽, 아래쪽, 왼쪽 속성 값에 영향을 주기 위해서는 요소의 위치를 선언해야 합니다.
3. 누적 및 누적 애니메이션
이전 코드에서는 {left: "100px"} 속성을 매개변수로 설정했고, {왼쪽:"+=25px"}로 다시 쓰면 효과는 다음과 같습니다
4. 다중 애니메이션
에서 다중 애니메이션 실행 동시에
위의 예는 매우 간단한 애니메이션입니다. 예를 들어 요소가 오른쪽으로 슬라이드되는 동안 여러 애니메이션을 동시에 수행하려는 경우 요소의 높이가 확대됩니다.
코드는 다음과 같습니다.
$(this).animate({left:"+=25px",height:"+=20px"},1000)
5. 🎜>
$(this).animate({left:"+=25px"},500)
.animate({height:"+=20px"},500)
이와 같은 애니메이션 효과의 실행에는 "애니메이션 대기열"이라는 시퀀스가 있습니다.
$("#cube").click(function(){
$(this).animate({left:"100px",height:"100px",opacity:"1"},500)
.animate({top:"40px",width:"100px"},500)
.fadeOut('slow')
})
동일한 요소에 여러 효과를 적용하는 경우 이러한 효과를 체인으로 대기열에 넣을 수 있습니다.
$("#cube").click(function(){
$(this).animate({left:"100px",height:"100px",opacity:"1"},500)
.animate({top:"40px",width:"100px"},500)
.css("border","5px solid blue")//改动这行
})
단, css() 메소드가 먼저 호출됩니다. 시간의.
$("#cube").click(function(){
$(this).animate({left:"100px",height:"100px",opacity:"1"},500)
.animate({top:"40px",width:"100px"},500,function(){
$(this).css("border","5px solid blue")
})
})
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.