0

特定のグラフィック (背景画像クラスでアンカーを使用しています) を持つメイン メニュー リンク (私たちについて、連絡先など) をアニメーション化する必要があります。キャンバスが特定の div (私のメニュー) をアニメーション化する最良の方法であるかどうか疑問に思っています。クリックした後、100px上下に移動したいだけです。例: [プロジェクト] をクリックすると、アンカー (画像付き) が 100 ピクセル下に移動します。"About Us" をクリックすると、"Projects" リンクが上 (元の位置) に移動し、"About us" が 100px 下に移動します。

キャンバスはそれを行う正しい方法ですか? css3 transitions/animate も使用できますが、IE9 はサポートされていません。IE9 でサイトを正しくレンダリングできるようにしたい。

これには、キャンバスまたは何らかの 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);
         }
     }
 }
4

2 に答える 2

1

animate()幅広いブラウザ サポートが必要な場合は、jQuery の機能を使用してください。そうでない場合は、CSS3 トランジションを使用してください。

アニメーションがほぼ同等である限り正確にどのように見えるかを気にしない場合は、Modernizrを利用して、CSS3 アニメーションをサポートしているブラウザーに配信し、jQuery アニメーションをサポートしていないブラウザーに配信できます。

animate()jQuery の関数がCSS3 アニメーションを適格なブラウザーにネイティブに配信できることは何の価値もありませんが、jQuery の開発者はまだこれを実装していません。これはおそらく、ブラウザが CSS3 トランジションをさまざまな程度で実装しているのに対し、jQuery は物事の一貫性を保つことを目的としているためです。

キャンバスは、セマンティック要素から抽象化されているため、IMO のユース ケースにはあまり適していません。

于 2013-10-07T10:55:51.400 に答える
0

これを行う方法の例を次に示します

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>
于 2013-10-07T19:19:29.760 に答える