JS는 jQuery의 animate() 애니메이션을 구현합니다.

이 글에서는 기본 JS로 구현된 jQuery의 animate() 애니메이션 예제를 주로 소개합니다. 편집자는 꽤 좋다고 생각해서 지금 공유하고 참고용으로 제공하겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

매개변수 소개:

obj	애니메이션을 수행하는 요소
css	JSON 값 쌍으로, "{속성 이름: 속성 값}" 형식으로, 순서와 애니메이션될 책의 순서 해당 ​​값
interval	속성의 각 변경에 대한 시간 간격
speedFactor	속도 인자로, 애니메이션이 버퍼링 효과를 가지게 합니다. 상수(speedFactor는 1)
func	애니메이션 실행 후 콜백 함수

참고:

각 요소에 타이머를 추가해야 합니다. 그렇지 않으면 서로 영향을 미칩니다.

cur != css[arr]는 각 속성이 목표 값에 도달했는지 여부를 결정합니다. 모든 속성이 목표 값에 도달한 경우에만 타이머가 지워집니다. 플래그의 기능은 특정 속성이 목표 값에 처음 도달했지만 목표에 도달하지 못한 다른 속성이 있을 때 타이머가 지워지는 것을 방지하는 것입니다. 값. 따라서 각 변경 전에 플래그를 true로 초기화하십시오. 목표에 도달하지 못한 속성이 발생하는 즉시 모든 속성이 목표 값에 도달할 때까지 플래그를 false로 설정하십시오.

속성 값 opacity의 값에는 소수가 있으므로 Math.ceil(속도) 및 Math.floor(속도)와 * 100 및 / 100 연산과 같은 특수 처리가 필요합니다.

function animate(obj, css, interval, speedFactor, func) { 
  clearInterval(obj.timer); 
  function getCss(obj, prop) { 
    if (obj.currentStyle) 
      return obj.currentStyle[prop]; // ie 
    else  
      return document.defaultView.getComputedStyle(obj, null)[prop]; // 非ie 
  } 
  obj.timer = setInterval(function(){ 
    var flag = true; 
    for (var prop in css) { 
      var cur = 0; 
      if(prop == "opacity")  
        cur = Math.round(parseFloat(getStyle(obj, prop)) * 100); 
      else  
        cur = parseInt(getStyle(obj, prop)); 
      var speed = (css[prop] - cur) * speedFactor; 
      speed = speed > 0 ? Math.ceil(speed): Math.floor(speed); 
      if (cur != css[prop]) 
        flag = false; 
      if (prop == "opacity") { 
        obj.style.filter = "alpha(opacity : '+(cur + speed)+' )"; 
        obj.style.opacity = (cur + speed) / 100; 
} 
      else  
        obj.style[prop] = cur + speed + "px"; 
    } 
    if (flag) { 
      clearInterval(obj.timer); 
      if (func) 
        func(); 
    } 
  }, interval); 
} 
var li = document.getElementsByTagName("li"); 
for(var i = 0; i < li.length; i ++){ 
  li[i].onmouseover = function(){ 
    animate(this, {width: 100, opacity: 0.5}, 10, 0.01, function(){ 
      alert("Finished!"); 
    }); 
  } 
}

관련 권장 사항:

Jquery의 animate() 응답이 너무 느려서 문제를 해결할 수 없습니다.

jquery 사용자 정의 애니메이션 animate()

jQuery animate() 메서드 사용법에 대한 심층적인 이해 example_jquery

위 내용은 JS는 jQuery의 animate() 애니메이션을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!