JavaScript动画 [英] JavaScript animation

问题描述

我想一个动画 DIV 移动 200像素水平在JavaScript中。

下code使得它跳像素，但有没有办法让它看上去没有动画使用jQuery？

函数（）{
    VAR的div =的document.getElementById（'challengeOneImageJavascript'）;
    div.style.left =200像素;
}


解决方案

下面是一个基本的动画设置：

 功能动画（ELEM，样式，单位，从到，时间）{
    如果回报（ELEM！）;
    VAR开始=新的Date（）。的getTime（）
        定时器=的setInterval（函数（）{
            VAR步= Math.min（1，（新的Date（）的getTime（） - 启动）/次）;
            elem.style [风格] =（自+步*（到从））+单位;
            如果（步骤== 1）clearInterval（定时器）;
        }，25）;
    elem.style [风格] =从+单元;
}
 

要使用：

 动画（
    的document.getElementById（'challengeOneImageJavascript'），
    左，像素，0,200,1000
）;
 

这个例子将动画给定的元素，从0像素超过1秒（1000毫秒）的时间线性滑动到200像素。

I am trying to animate a div moving 200px horizontally in JavaScript.

The code below makes it jump the pixels, but is there a way to make it look animated without using jQuery?

function () {
    var div = document.getElementById('challengeOneImageJavascript');
    div.style.left = "200px";
}

解决方案

Here is a basic animation setup:

function animate(elem,style,unit,from,to,time) {
    if( !elem) return;
    var start = new Date().getTime(),
        timer = setInterval(function() {
            var step = Math.min(1,(new Date().getTime()-start)/time);
            elem.style[style] = (from+step*(to-from))+unit;
            if( step == 1) clearInterval(timer);
        },25);
    elem.style[style] = from+unit;
}

To use:

animate(
    document.getElementById('challengeOneImageJavascript'),
    "left","px",0,200,1000
);

This example will animate the given element to slide linearly from 0px to 200px over a time of 1 second (1000 ms).

这篇关于JavaScript动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！