javascript - 动画菜单 : shall I use canvas or javascript?

Question

我必须为我的主菜单链接(关于我们、联系人等)制作动画，这些链接具有特定的图形(我正在使用带有背景图像类的 anchor )。我想知道 Canvas 是否是为特定 div(我的菜单)设置动画的最佳方式。我只想在点击后将它向上/向下移动 100px。例如:我单击“元素”，我的 anchor (带有我的图像)向下移动了 100 像素。当我点击“关于我们”时，“元素”链接向上移动(在它原来的位置)，“关于我们”向下移动 100 像素。

Canvas 是正确的做法吗？我也可以使用 css3 transitions/animate 但不支持 IE9。我希望 IE9 能够正确呈现我的网站。

我应该为此使用 canvas 还是某种 javascript 插件？ (我也可以使用具有相对/绝对定位的普通 javascript，它会不断改变顶部像素，但我不喜欢它的结果)。我使用普通 javascript 的是这样的:

我的菜单:

 <div id="menu">
   <ul class="nav">
        <li><a href="#" class="projects" id="projects" onclick="move()"></a>
        </li>

        <li><a href="#" class="aboutus"></a>
        </li>

        <li><a href="#" class="contact"></a>
        </li>
   </ul>

我的 CSS:

 a.projects 
 {
     width: 184px;
     height: 32px;
     background: url('css-images/projects.png') no-repeat;
         position: absolute;
 }
#menu
{
    position:relative;
}

我的javascript:

 function move(){
     var proj = document.getElementById("projects");
     var count = 0;
     var id  = setInterval(loop, 30);

     function loop(){
         proj.style.top = count + "px";

         var max = 100;
         count+=10;
         if(count >= max){
        clearInterval(id);
         }
     }
 }

Answer 1

使用 jQuery 的 animate()如果需要广泛的浏览器支持，则可以使用该功能。如果不是，请使用 CSS3 transitions .

如果您不关心动画的外观，只要它们大致相同，您可以利用 Modernizr向支持它们的浏览器提供 CSS3 动画，向不支持它们的浏览器提供 jQuery 动画。

jQuery 的 animate() 函数可以原生地向符合条件的浏览器提供 CSS3 动画是毫无意义的，但 jQuery 的开发人员尚未实现这一点。这可能是因为浏览器仍然实现 CSS3 转换并取得了不同程度的成功，而 jQuery 旨在保持一致。

Canvas 并不真正适合 IMO 用例，因为它是从您的语义元素中抽象出来的。