javascript - 使用显示属性淡入淡出

Question

function myFunction() {
    document.getElementById("myDIV").style.display = "block";
    document.getElementById("second").style.display = "none";
}

function myFunction2() {
    document.getElementById("second").style.display ="block";
    document.getElementById("myDIV").style.display = "none";
}

#myDIV {
    width: 500px;
    height: 500px;
    background-color: lightblue;
    display: none;
}
    
#second {
    width: 500px;
    height: 500px;
    background-color: lightblue;
    display: none;
}

<button onclick="myFunction()">Try it</button>
<button onclick="myFunction2()">Try this now</button>
<div id="myDIV">
    This is my DIV element.
</div>
<div id="second">
    This is my DIV2 element.
</div>

上面的代码让两个分区在同一个位置交替出现。我怎样才能以它们出现和消失的方式操纵这些部门。更具体地说是淡入(出现)淡出(消失)。谢谢

Answer 1

使用jQuery 进行事件处理和淡入淡出 动画:

HTML:

<button id="button1">Try it</button>
<button id="button2">Try this now</button>

Javascript:

$('#button1').on('click', function () {
    $('#second').fadeOut(2000, function () {
        $('#myDIV').fadeIn(2000);
    });
});


$('#button2').on('click', function () {
    $('#myDIV').fadeOut(2000, function () {
        $('#second').fadeIn(2000);
    });
});

演示:http://jsfiddle.net/tusharj/rLvpqcLb/