使用JavaScript的自定义动画

问题描述：

我正在尝试使用JavaScript来做非常基本的自定义动画。我使用名为Modernizr的库来检测HTML5支持，如果浏览器不支持CSS3转换，我希望有我自己的定制（非jQuery）脚本来重新创建CSS3转换的相同效果。使用JavaScript的自定义动画

我这个代码的想法是这样的：

JS：

function slide() { 
    var cur = 0; 
    while (cur <= 50) { 
    setInterval("document.getElementById('slider').style.marginLeft=cur + 'px'",100); 
    cur = cur++; 
    } 
}

HTML（用于悬停）：

<div id="slider" onmouseover="slide()"> 
    This should slide left. 
</div>

这并不工作（我知道这并不循环，这是我无法弄清楚的问题之一）。我对JS很新，所以我不知道一些非常基本的东西。

我不想使用jQuery的主要原因是教育目的。在学习jQuery之前，我想知道基本的JS，只是让我知道如何去做我想做的事情。

我希望这适用于两种不同的情况，一种是自动的，一种只在悬停（并且悬停版本不必循环）。我在悬停方面做了一些工作，但你越是徘徊，它移动得越快。

谢谢！

答

function slide() { 
    var cur = 0; 
    while (cur >= 50) { 
    setInterval("document.getElementById('slider').style.marginLeft=cur + 'px'",100); 
    cur = cur++; 
    } 
}

你的代码设置到cur0，然后while条件是cur >= 50（*而cur变量是大于或等于50），因为它是0。

而且这永远不会为真，动画使用循环不是一个好主意，因为浏览器可能不会以令人愉快的方式呈现结果（或根本就不会）。没有循环使用setInterval()。

如果我用写这个任务，它可能看起来像......

function slide(element, newHeight) { 
    var currentHeight = element.offsetHeight; 
    var increaseHeight = function() { 
     currentHeight += 10; 
     element.style.height = currentHeight + 'px'; 
    } 
    var interval = setInterval(function() { 
     if (currentHeight >= newHeight) { 
      clearInterval(interval); 
     } 
     increaseHeight(); 
    }, 100); 
}

jsFiddle。

啊意味着使用' JacobTheDev 2011-05-03 00:38:27

@Rev你有覆盖，看到更新:) – alex 2011-05-03 00:40:12

花了我一阵试试这个，对不起。这是完美的。 :)我调整了一下平滑的动画，http://jsfiddle.net/yexGt/1/ – JacobTheDev 2011-05-25 00:05:22

答

在javascript中有很多滑动的例子。

这是其中之一。

http://www.harrymaugans.com/2007/03/06/how-to-create-an-animated-sliding-collapsible-div-with-javascript-and-css/

在您的例子，如果你使用setInterval你还会想打电话clearInterval。对于这两个你可以看看的描述：https://developer.mozilla.org/en/window.setInterval

希望你实际上并没有在元素中使用onmouseover函数，如图所示，而是检查是否需要这个，然后在页面加载后设置它。

您可能想看看不引人注意的JavaScript来了解如何做到这一点。

有这个各种物品，但你可以下手：

http://labs.adobe.com/technologies/spry/articles/best_practices/separating_behavior.html

使用JavaScript的自定义动画

相关推荐