プロンプトWebkitの移行

私は3つのボックスを持つページがあります。私が起こそうとしているのは、3番目のボックスをクリックすると、ボックス1は1つの速度で消えるよう促され、ボックス2はゆっくりと消えます。プロンプトWebkitの移行

<html> 
<head> 
<style> 
div.box { /* this style applies only to the 'before' transition state */ 
opacity:1;} 
div.fadeAway { /* give the transition rules to "after" state */ 
opacity:0; 
-webkit-transition-property: opacity; 
-webkit-transition-duration: 2s; } 
div.fadeAway2 { /* give the transition rules to "after" state */ 
opacity:0; 
-webkit-transition-property: opacity; 
-webkit-transition-duration: 5s; } 
</style> 

</script> 
</head> 

<body> 
    <div class="box" 
style="width:100px; 
height:100px; 
background-color:green;"> 
Tap to fade 
</div> 


    <div class="box2" 
style="width:100px; 
height:100px; 
background-color:red;"> 
Tap to fade 
</div> 

<div class="box3" 
style="width:100px; 
height:100px; 
background-color:blue;" 
this.onclick=".box2 .box3.className = 'fadeaway''fadeaway2'"> 
Tap to fade 
</div> 

</body> 
</html>

ありがとうございました。

出典

2012-03-05 loriensleafs

ここで私は大丈夫それhttp://jsfiddle.net/mCjmt/ – loriensleafs

<html> 
<head> 
<style> 
    .box 
    {  
     opacity:1; 
     color: white; 
     width: 100px; 
     height: 100px; 
    } 

    #box1 
    { 
     background-color: green; 
    } 

    #box2 
    { 
     background-color: red; 
    } 

    #box3 
    { 
     background-color: blue; 
    } 

    div.fadeAway1 
    { 
     opacity:0; 
     -webkit-transition-property: opacity; 
     -webkit-transition-duration: 2s; 
    } 

    div.fadeAway2 
    { 
     opacity:0; 
     -webkit-transition-property: opacity; 
     -webkit-transition-duration: 5s; 
    } 
</style> 
</head> 

<body> 
<div id="box1" class="box"></div> 
<div id="box2" class="box"></div> 
<div id="box3" class="box">Tap to fade</div> 


<script> 
    (function() { 
     document.getElementById('box3').addEventListener('click', function() { 
      for (var i = 1, stop = 2; i <= stop; i += 1) { 
       document.getElementById('box' + i).className = "box fadeAway" + i; 
      } 
     }, false); 
    })(); 

</script> 

</body> 
</html>

ここではjQueryを実装する例を示します

<html> 
<head> 

<style> 
    .box 
    {  
     opacity:1; 
     color: white; 
     width: 100px; 
     height: 100px; 
    } 

    #box1 
    { 
     background-color: green; 
    } 

    #box2 
    { 
     background-color: red; 
    } 

    #box3 
    { 
     background-color: blue; 
    } 

</style> 
</head> 

<body> 
<div id="box1" class="box"></div> 
<div id="box2" class="box"></div> 
<div id="box3" class="box">Tap to fade</div> 


<script src="http://code.jquery.com/jquery-latest.js"></script> 
<script> 
    $(document).ready(function() { 
     $("#box3").click(function() { 
      for (var i = 1, stop = 2; i <= stop; i += 1) { 
       $('#box' + i).fadeTo(500 * (i*2),0); 
      } 
     }); 
    }); 

</script> 

</body> 
</html>

出典

2012-03-05 21:17:18 fenone

のために一緒に置くので、これは確かに動作しますフィドルだ、のためにそれを行うためのおかげで私。だから私が頼んだのは、これが私が最終的に望んでいたもののよりシンプルなバージョンだったからです。これはWebkitで3dセットアップされたアニメーションでした：http://www.klossal.com/portfolio/slider.html私は望んでいました真ん中にある "単数の"レイヤーとしてお互いのミーティングを上下に崩壊させたレイヤーをアニメートし、それを回転させます。 – loriensleafs

私はあなたがwebkit 3d stuffを効果的にするために思いついたものを変更するのに問題があります。ここのjsfiddle http://jsfiddle.net/9BEUQ/は、両方のレイヤーのtranslate3d（-14px、-120px、3px）からtranslate3d（-14px、-85px、3px）への変更をanimateすることです。私はonclickを変更するためにこれらの両方を取得するのに問題があります。 – loriensleafs

だから私は赤ちゃんのステップを取ろうとしている、http://jsfiddle.net/VfurZ/10/私は4つのdivの2つのプロパティを変更するこのフィドルを取得しようとしている。各divには、親と子、別のクラス、別々のIDがあります。私はあなたのスクリプトを更新する方法がわからないので、2つの要素IDを取得してください。私はjQueryではなく、javascriptとwebkitでこれらの遷移をしたいと思います。 – loriensleafs

答えて

関連する問題