Question

我正在尝试添加淡入/淡出效果，从display：none切换到display：block，反之亦然。这是我的代码：

使用Javascript：

function showDiv(idInfo) {
var sel = document.getElementById('contentDivs').getElementsByClassName('x');
for (var i=0; i<sel.length; i++) {
    sel[i].style.display = 'none';
}
document.getElementById('content'+idInfo).style.display = 'block';
}
window.onload = function() {showDiv('1');}

HTML / PHP：

<div id="menu">
    <ul>
        <a href='' onclick='showDiv("1");return false'><li>Button 1</li></a>
        <a href='' onclick='showDiv("2");return false'><li>Button 2</li></a>
        <a href='' onclick='showDiv("3");return false'><li>Button 3</li></a>
    </ul>
</div>

<div id="contentDivs">
<?php
    for($i=1;$i<=3;$i++){
        echo('
        <div id="content'.$i.'" class="x">
            <div id="box1">
                <p>Text '.$i.'</p>
            </div>
            <div id="box2">
                <table>
                    <tr>
                        <td>Content '.$i.'</td>
                        <td>Content '.$i.'</td>
                        <td>Content '.$i.'</td>
                    <tr>
                </table>
            </div>
        </div>');
    }?>
</div>

有关如何实现这一目标的任何想法？我尝试了几件事，但我无法找到正确的方法。感谢帮助。

感谢。

Answer 1

没有开箱即用的方法。有两种方法可以使用CSS3 opacity属性以稍微不同的方式执行此操作：

首先，添加一个CSS声明，在其中添加active类和CSS3过渡：

#menu ul a {
   opacity: 1;
   -webkit-transition: opacity 1s; /* For Safari 3.1 to 6.0 */
    transition: opacity 1s;
}

#menu ul a.inactive {
   opacity: 0;
   -webkit-transition: opacity 1s; /* For Safari 3.1 to 6.0 */
    transition: opacity 1s;
}

然后，让您的JavaScript添加inactive类。此外，一秒钟后，将a更改为display: none。

function showDiv(idInfo) {
    var newId = 'content' + idInfo;
    var sel = document.getElementById('contentDivs').getElementsByClassName('x');
    for (var i=0; i<sel.length; i++) {
        // Fade In all our currently viewable divs
        sel[i].className += 'inactive';
        // If this is NOT our new div, hide after 1 second (transition time)
        if (sel[i].id !== newId)
            setTimeout(function () {
                sel[i].style.display = 'none';
            }, 1000);
        }
    }
    var newEl = document.getElementById(newId);
    // Make sure our new element is being displayed
    newEl.style.display = 'block';
    // Add the `inactive` class in order to make the opacity 0
    newEl.className += 'inactive';
    setTimeout(function () {
        // Remove the `inactive` className in order to trigger the fade in
        newEl.className = '';
    }, 0);
}
window.onload = function() {showDiv('1');}

您也可以使用JavaScript（无需CSS）：

function showDiv(idInfo) { 
     var newId = 'content'+idInfo;
     var $elements = $('#contentDivs').find('.x');
     $elements.fadeOut(1000, funciton () {
         var $newElement = $('#' + newId);
         $newElement.fadeIn();
     });
}
window.onload = function() {showDiv('1');}

Answer 2

如果元素的显示和元素的转换在同一帧上开始，则转换将永远不会发生。

您必须设置元素的显示，然后执行

setTimeout(function() {
     // start transition
}, 0);

调用setTimeout为0将导致转换发生在下一帧。

切换显示时的过渡效果：无 - 显示：块

2 个答案: