jQuery Animate 심층학습 (3)

이 글에서는 이전 글 [jQuery에서 Animate 심층 학습(2)]에 이어 jQuery에서 Animate의 사용법을 심도 있게 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

progress

유형: 함수( 약속 애니메이션, 숫자 진행률, 남은 숫자Ms )

애니메이션의 각 단계가 완료된 후 호출되는 함수입니다. 애니메이션 속성이 아무리 많아도 각 애니메이션 요소는 별도의 함수를 실행합니다. (버전 추가: 1.8)

진행 번호: 현재 애니메이션 진행 수준을 나타냅니다. 0~1

남은 횟수Ms: 최종 애니메이션 속성 값과의 차이입니다.

CSS 코드:

.block {
    position: relative;
    background-color: #abc;
    width: 40px;
    height: 40px;
    float: left;
    margin: 5px;
  }
  .wrap{position:relative;float:left;width:400px;}
  #go{border:1px solid red;color:blue;cursor:pointer;}

Html 코드:

<p>
    <button id="go">Run>></button>
</p>
<p class="wrap">
    <p class="block"></p>
    <p class="block"></p>
    <p class="block"></p>
    <p class="block"></p>
    <p class="block"></p>
    <p class="block"></p>
</p>

Javscript code :

var j=0,k=0;
    $( "#go" ).one("click",function() {
      $( ".block:first" ).animate(
          {
            left: 100,top:200
          },
          {
            duration: 1000,
            step: function( now, fx ){
                k++;
                if(k==1) console.log(fx);
              $( ".block:gt(0)" ).css( fx.prop, now );//注意到prop的变化性
            },
            progress:function(a,p,r){
                j++;
                if(j==1){console.log(a);console.log(a.props)}
                a.progress(function(){
                    console.log("Hi"+j);//注意progress的运行时机
                });                
                console.log(p+"---"+r);//注意p,r的变化
            }
      });
    });

콘솔에서 출력 후의 값을 관찰하면 뭔가를 얻을 수 있습니다!

간단한 진행률 표시줄 애니메이션을 만듭니다. 빨간색에서 시작하여 30%에서 녹색으로 변하고, 60%에서 분홍색으로 변합니다. 색상 변경 플러그인이 없으며 선택은 클래스를 교체하는 것입니다. 모든 사람이 이 진행 상황과 단계 적용을 이해하도록 하세요. 이 예가 다른 사람들에게 영감을 주기를 바랍니다.

CSS 코드:

 .progressBar {
 	float: left;
 	position: relative;
 	width: 500px;
 	height: 30px;
 	border: 1px solid orange;
 	background-color: #999;
 }
 
 .progressBar p {
 	padding: 0;
 	margin: 0;
 	position: absolute;
 	left: 0;
 	top: 0;
 	height: 30px;
 }
 
 .red {
 	background-color: red;
 }
 
 .green {
 	background-color: green;
 }
 
 .pink {
 	background-color: pink;
 }

Html 코드:

 <p class="progressBar"> 
    <p class="progress"></p>
 </p>

Javascript 코드:

$(".progressBar p").addClass("red").animate({
	"width": 500
}, {
	duration: 5000,
	progress: function(a, p, r) {
		if(p > 0.3 && !$(this).hasClass("green")) $(this).removeClass().addClass("green");
		if(p > 0.6 && !$(this).hasClass("pink")) $(this).removeClass().addClass("pink");
	}
});

요약: 위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다.

위 내용은 jQuery Animate 심층학습 (3)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!