Question

我有一个有三个方框的页面。我想要发生的是当我点击第三个框时，框1被提示以一个速度逐渐消失，而框2则以较慢的速度消失。

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

提前感谢您提供任何帮助。

Answer 1

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

提示Webkit过渡

1 个答案: