javascriptでスライドアニメーションを正しく実装する方法は？

JavaScriptを学ぶ私の追求では、同じスライダーを作っていますが、javascriptのアニメーション（CSSを使用すると問題はありません - サイトグーグル上で作成されました）：javascriptでスライドアニメーションを正しく実装する方法は？

オリジナルのGoogleスライダー（CSSでアニメーション）：
http://www.google.com/about/datacenters/inside/

私の仕事、これまで：

http://jsfiddle.net/TS7Xu/3/

<!-- language-all: lang-html --> 
<!DOCTYPE HTML> 
<html lang="en-US"> 
<head> 
<meta charset="UTF-8"> 
<title></title> 
<style type="text/css"> 
    #promo{ 
    display:block; 
    height: 354px; 
    width: 790px; 
    } 
    .promo-item { 
     width: 81px; 
     height: 354px; 
     float: left; 
    } 
    .promo-item.wide { 
     width: 613px; 
    } 
    .threeP { 
     background-color: rgb(206, 203, 203); 
    } 
    .oneP { 
     background-color: rgb(241, 220, 182); 
    } 
    .twoP { 
     background-color: rgb(187, 217, 226); 
    } 
</style> 
</head> 
<body> 
<div id="promo"> 
    <div class="promo-item twoP wide" id="twoP"> 
     <div> 
     </div> 
    </div> 
    <div class="promo-item threeP" id="threeP"> 
     <div> 
     </div> 
    </div> 
    <div class="promo-item oneP" id="oneP"> 
     <div> 
     </div> 
    </div> 
</div> 


<script type="text/javascript"> 
var oneP = document.getElementById('oneP'); 
var twoP = document.getElementById('twoP'); 
var threeP = document.getElementById('threeP'); 
step = 1; 
      function expandPanel1(){ 
       var h = oneP.clientWidth + step; 
       oneP.style.width = h+"px"; 
       if (h < 614 || h !=614) { 
        setTimeout("expandPanel1()", 5); 
       } else { oneP.style.width = 613+"px"; } 
      }    
      function expandPanel2(){ 
       var h = twoP.clientWidth + step; 
       twoP.style.width = h+"px"; 
       if (h < 614 || h !=614) { 
        setTimeout("expandPanel2()", 5) 
       } else { twoP.style.width = 613+"px"; } 
      }    
      function expandPanel3(){ 
       var h = threeP.clientWidth + step; 
       threeP.style.width = h+"px"; 
       if (h < 614 || h !=614) { 
        setTimeout("expandPanel3()", 5) 
       } else { threeP.style.width = 613+"px"; } 
      } 
      //--------------------------------------------- 
       function expandPanel1Minus(){ 
        var h = oneP.clientWidth - step; 
        oneP.style.width = h+"px"; 
        if (h > 80 || h !=80) { 
         setTimeout("expandPanel1Minus()", 5) 
        } else { oneP.style.width = 81+"px"; } 
       }    
       function expandPanel2Minus(){ 
        var h = twoP.clientWidth - step; 
        twoP.style.width = h+"px"; 
        if (h > 80 || h !=80) { 
         setTimeout("expandPanel2Minus()", 5) 
        } else { twoP.style.width = 81+"px"; } 
       }    
       function expandPanel3Minus(){ 
        var h = threeP.clientWidth - step; 
        threeP.style.width = h+"px"; 
        if (h > 80 || h !=80) { 
         setTimeout("expandPanel3Minus()", 5) 
        } else { threeP.style.width = 81+"px"; } 
       } 
      //--------------------------------------------- 
    oneP.onmouseover = function() { 
     expandPanel1() 
      expandPanel3Minus() 
      expandPanel2Minus() 
    } 
    twoP.onmouseover = function() { 
     expandPanel2() 
      expandPanel3Minus() 
      expandPanel1Minus() 
    } 
    threeP.onmouseover = function() { 
     expandPanel3() 
      expandPanel2Minus() 
      expandPanel1Minus() 
    } 
</script>

私はスライダー上でマウスとの長いドライブならば、それは「激しく」を実行するために:)私は意図的にアニメーションの速度を低下開始しますので、この例では、エラーを持って知っています。

これを正しく実装する方法に関するガイダンスはありますか？

出典

2012-10-24 user1769072

これをcss3で完全に行うことができます。あなたのための例で働く。 – tobspr

@ tobias-springer私はそれがCSSで（私にとってそれは非常に簡単です）行うことができますが、私はJavaScriptを学んでいると私は彼とこれを行うには非常に興味があります。 – user1769072

さて、ここではCSSのソリューションです：http://jsfiddle.net/aJzgJ/4/embedded/result/ – tobspr

純粋なJS実装 - JSFiddle linkです。フィドルが保存されなかった場合は、ここではJSビットのみです。残りのHTMLはOPと同じです。ボディロード時に関数goが呼び出されます。

var f, s, t; 
var which; 

function go() { 
    f = document.getElementById('oneP'); 
    s = document.getElementById('twoP'); 
    t = document.getElementById('threeP'); 

    which = s; 

    f.onmouseover = function() { 
     foo(this) 
    }; 

    s.onmouseover = function() { 
     foo(this) 
    }; 

    t.onmouseover = function() { 
     foo(this) 
    }; 
} 

function foo(e) { 
    if (e.clientWidth < 613) { 
     e.style.width = (e.clientWidth) + 10 + "px"; 
     which.style.width = (which.clientWidth - 10) + "px"; 

     setTimeout(function() { 
      foo(e); 
     }, 5); 
    } 
    else if (e.clientWidth > 613) { 
     e.style.width = "613px"; 
     which.style.width = "81px"; 

     which = e; 
    } 
}

は、アニメーションがアニメーションが実行されている間、それは別のセクション上にマウスオーバーすることが可能であるので、十分に速くないが、仕事のビットは、私が思うままにあります。私はあなたにそのビットを残します:)

出典

2012-10-24 18:31:46 Satyajit

Ho-ho。このようなエレガントなソリューションには非常に感謝しています。私がすることの残りの部分は、自分自身を訂正するでしょう:) – user1769072

多くの時間を節約したい場合は、jQueryを使用してください。このhttp://jsfiddle.net/QXRVb/を試してください。その例では、divのサイズを変更することを好まなかった。私はそれらを移動するためにZ-インデックスとjQueryアニメーションを使用しました。そうすれば、彼らのために正しいポジションを作ることがより簡単になります。

<style> 
#promo{ 
    width:900px; 
    height:300px; 
    position:absolute; 
    top:0px; 
    left:0px; 
    overflow:hidden; 
} 
#oneP{ 
    width:600px; 
    height:300px; 
    position:absolute; 
    top:0px; 
    left:0px; 
    background:#999; 
    z-index:1; 
} 
#twoP{ 
    width:600px; 
    height:300px; 
    position:absolute; 
    top:0px; 
    left:150px; 
    background:#ddd; 
    z-index:0; 
} 
#threeP{ 
    width:600px; 
    height:300px; 
    position:absolute; 
    top:0px; 
    left:750px; 
    background:#666; 
    z-index:1; 
} 
</style> 

<html> 
<div id="promo"> 
<div id="oneP">  
</div> 
<div id="twoP">  
</div> 
<div id="threeP">  
</div> 
</div> 
</html> 

<script> 
$('#oneP').mouseover(function() { 
    $('#oneP').animate({ 
     left: 0 
    },200); 
    $('#threeP').animate({ 
     left: 750 
    },200); 
    $('#twoP').animate({ 
     left: 450 
    },200); 
}); 

$('#twoP').mouseover(function() { 
    $('#oneP').animate({ 
     left: -450 
    },200);  
    $('#threeP').animate({ 
     left: 750 
    },200); 
    $('#twoP').animate({ 
     left: 150 
    },200); 
}); 

$('#threeP').mouseover(function() { 
    $('#threeP').animate({ 
     left: 300 
    },200);  
    $('#oneP').animate({ 
     left: -450 
    },200); 
    $('#twoP').animate({ 
     left: -150 
    },200); 
}); 
</script>`

この方法を使用すると、div内に画像タグを簡単に配置できます。

出典

2012-10-24 18:47:16 satire

あなたの時間とあなたの脳の "処理時間"に感謝します。 :)あなたの方法は気付かなかった、経験のおかげで！ – user1769072

javascriptでスライドアニメーションを正しく実装する方法は？

答えて

関連する問題