Question

我已经找到并阅读了大量有关requestAnimationFrame以及简化和javascript动画的文章，但我无法将它们全部放在一起以完成我需要的工作。老实说，我甚至不知道在哪里/如何开始。此外，我读过的很多文章都相互矛盾，或者显示出很多变化/选项，我不知道应该选哪些。

我有一个div margin: 10px，我想要一个平滑的动画，宽松到margin: 0。

我最大的问题是我需要在OOB SharePoint 2010网站上工作，这意味着我不能使用CSS3或jQuery，它必须与IE 9一起使用。

<div id="box" style="margin: 10px;">test</div>

<script type="text/javascript">

// these are the functions I need help with; not sure where/how to start
document.getElementById("box").onmouseenter = function(){}; // smooth animation to make margin = 0
document.getElementById("box").onmouseleave = function(){}; // smooth animation to make margin = 10

</script>

我不是在找人告诉我该怎么做。我只是希望有人能指出我关于这个问题的一些好文章的正确方向。我找不到任何帮助我......

Answer 1

你可以试试这个

document.getElementById("p").onmouseover=function(){
    
    function animate(margin,el) {
        el.style.margin=margin+"px";
        if (parseInt(el.style.margin)>0) {
            window.requestAnimationFrame(function(){animate(margin-1,el)});
        }
    }
    animate(10,this);
}
document.getElementById("p").onmouseout=function(){
    
    function animate(margin,el) {
        el.style.margin=margin+"px";
        if (parseInt(el.style.margin)<10) {
            window.requestAnimationFrame(function(){animate(margin+1,el)});
        }
    }
    animate(parseInt(this.style.margin),this);
}

<p id=p>I am a working demo</p>

PS：将onmouseover转换为onmouseout并将onmouseout转换为mouseleave

requestAnimationFrame，可以在IE 9+中调整DIV的大小（不使用jQuery或CSS3）

1 个答案: