Подсказка перехода Webkit - PullRequest
Новая
       2

Подсказка перехода Webkit

0 голосов
/ 05 марта 2012

У меня есть страница с тремя полями.То, что я пытаюсь добиться, это когда я нажимаю на третье поле, поле 1 будет затухать на одной скорости, а поле два - на более медленном. 

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

Заранее спасибо залюбая помощь в этом.

1 Ответ

0 голосов
/ 06 марта 2012 
<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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...