Cet article présente principalement l'exemple d'animation animate() de jQuery implémenté en JS natif. L'éditeur pense qu'il est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.
Introduction aux paramètres :
obj
|
Exécuter l'animation La paire de valeurs de l'élément | ||||||||||
css | JSON, sous la forme de "{nom de l'attribut : valeur de l'attribut}", fait référence à la séquence de livres à animer et sa valeur correspondante | ||||||||||
intervalle |
L'intervalle de temps pour chaque changement de l'attribut | tr>||||||||||
speedFactor | Le facteur de vitesse donne à l'animation un effet tampon au lieu d'une vitesse constante (speedFactor est 1) | ||||||||||
func | Fonction de rappel après l'exécution de l'animation |
Remarque :
Une minuterie doit être ajoutée pour chaque element , sinon ils s’influenceront mutuellement.
cur != css[arr] détermine si chaque attribut a atteint la valeur cible. Le minuteur sera effacé uniquement lorsque tous les attributs atteignent la valeur cible. La fonction du drapeau est d'empêcher le minuteur d'être effacé lorsqu'un certain attribut est le premier à atteindre la valeur cible mais que d'autres attributs n'ont pas atteint la cible. valeur. Par conséquent, initialisez l'indicateur sur true avant chaque modification. Dès que vous rencontrez un attribut qui n'atteint pas la cible, définissez l'indicateur sur false. Le minuteur ne sera pas effacé tant que tous les attributs n'atteindront pas la valeur cible.
La valeur de l'attribut opacity a des décimales, un traitement spécial est donc nécessaire : Math.ceil(speed) et Math.floor(speed) ainsi que les opérations * 100 et / 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!"); }); } }
La réponse animate() de Jquery est trop lente pour résoudre le problème
Compréhension approfondie de l'animation personnalisée jquery animate()
Exemples d'utilisation de la méthode animate() dans jQuery_jqueryCe qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!