Question

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

帆布是正确的方法吗？我也可以使用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>

我的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。

Answer 2

继承人如何做到这一点的例子

使用Javascript：

<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>

CSS：

    <style>
#box1 {
height:10px;
width:25%;
background-color:red;
float:left;
margin-right:2%;    
}

#box2 {
    height:10px;
width:25%;
background-color:green;
margin-right:2%;
float:left;
}

#box3 {
    height:10px;
width:25%;
background-color:blue;
margin-right:2%;
float:left;
}
</style>

HTML：

<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>

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

2 个答案: