动画菜单：我应该使用画布还是javascript？

我必须动画我的主菜单链接（关于我们，联系人等），其中有特定的图形（我使用锚与背景图像类）。 我想知道画布是否是制作特定div（我的菜单）动画的最佳方式。我只想在点击后向上/向下移动100px。 例如：我单击“项目”，我的锚（带我的图像）向下移动100像素。当我点击“关于我们”时，“项目”链接向上移动（在其原始位置），而“关于我们”则向下移动100像素

画布是正确的方法吗？我也可以使用css3转换/动画，但不支持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>

我的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);
         }
     }
 }

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
    //BOX 1
    $('#b1').click(function(){
        $('#box1').animate(
        {
            height:'300px'
        });

        $('#box2').animate(
        {
            height:'10px'
        });

        $('#box3').animate(
        {
            height:'10px'
        });

    });

    //BOX 2
    $('#b2').click(function(){
        $('#box1').animate(
        {
            height:'10px'
        });

        $('#box2').animate(
        {
            height:'300px'
        });

        $('#box3').animate(
        {
            height:'10px'
        });

    });

    //BOX 3
    $('#b3').click(function(){
        $('#box1').animate(
        {
            height:'10px'
        });

        $('#box2').animate(
        {
            height:'10px'
        });

        $('#box3').animate(
        {
            height:'300px'
        });

    });


});

</script>

如果需要广泛的浏览器支持，请使用jQuery的功能。如果没有，请使用

如果您不关心动画的外观，只要它们大致相同，您就可以利用它将CSS3动画交付给支持它们的浏览器，将jQuery动画交付给不支持它们的浏览器

jQuery的

animate（）

函数本来可以将CSS3动画提供给符合条件的浏览器，这一点毫无价值，但jQuery的开发人员尚未实现这一点。这可能是因为浏览器仍然以不同程度的成功实现了CSS3转换，而jQuery则致力于保持一致性

---

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

下面是一个如何做到这一点的示例

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);
         }
     }
 }

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
    //BOX 1
    $('#b1').click(function(){
        $('#box1').animate(
        {
            height:'300px'
        });

        $('#box2').animate(
        {
            height:'10px'
        });

        $('#box3').animate(
        {
            height:'10px'
        });

    });

    //BOX 2
    $('#b2').click(function(){
        $('#box1').animate(
        {
            height:'10px'
        });

        $('#box2').animate(
        {
            height:'300px'
        });

        $('#box3').animate(
        {
            height:'10px'
        });

    });

    //BOX 3
    $('#b3').click(function(){
        $('#box1').animate(
        {
            height:'10px'
        });

        $('#box2').animate(
        {
            height:'10px'
        });

        $('#box3').animate(
        {
            height:'300px'
        });

    });


});

</script>

$（文档）.ready（函数（）{
//方框1
$（'#b1'）。单击（函数（）{
$（'#box1'）。设置动画(
{
高度：'300px'
});
$（'#box2'）。设置动画(
{
高度：'10px'
});
$（'#box3'）。设置动画(
{
高度：'10px'
});
});
//方框2
$（'#b2'）。单击（函数（）{
$（'#box1'）。设置动画(
{
高度：'10px'
});
$（'#box2'）。设置动画(
{
高度：'300px'
});
$（'#box3'）。设置动画(
{
高度：'10px'
});
});
//方框3
$（'#b3'）。单击（函数（）{
$（'#box1'）。设置动画(
{
高度：'10px'
});
$（'#box2'）。设置动画(
{
高度：'10px'
});
$（'#box3'）。设置动画(
{
高度：'300px'
});
});
});

CSS:

#框1{
高度：10px；
宽度：25%；
背景色：红色；
浮动：左；
保证金权利：2%；
}
#框2{
高度：10px；
宽度：25%；
背景颜色：绿色；
保证金权利：2%；
浮动：左；
}
#框3{
高度：10px；
宽度：25%；
背景颜色：蓝色；
保证金权利：2%；
浮动：左；
}

HTML:

您真正希望支持哪些浏览器？如果支持IE没有那么重要，你可以选择CSS3动画，因为它们比更改css顶级像素值更平滑。嘿，你可以在你的网站上使用CSS3访问此链接谢谢，我使用了动画。我不知道。

<a href="#"id="b1"><div id="box1"></div></a>
<a href="#" id="b2"><div id="box2"></div></a>
<a href="#" id="b3"><div id="box3"></div></a>