动画Div扩展到全屏

Question

我的HTML中有三个div 。 我要单击的最终结果是，每个div都会平滑扩展以填充整个屏幕（或全屏的父元素），并在div扩展时显示其他信息（例如，单击“ Resume”时，显示更多内容）。 我还希望角落里的退出按钮关闭展开的div。

我不知道我需要结合什么JavaScript或jQuery。 这是我的HTML和CSS的JS小提琴

HTML：

<div class="page3">
    <div class="column" id="col1">
        <div class="centeringelement"></div>
        <a class="resumetitle" href=""><span></span>Education</a>
    </div>
    <div class="column" id="col2">
        <div class="centeringelement"></div>
        <a class="resumetitle" href=""><span></span>Work Experience</a>
    </div>
    <div class="column" id="col3">
        <div class="centeringelement"></div>
        <a class="resumetitle" href=""><span></span>Skills and Achievements</a>
    </div>
</div>

CSS：

.page3 {
    background: -webkit-linear-gradient(90deg, #00c6ff 10%, #0072ff 90%); /* Chrome 10+, Saf5.1+ */
    background: -moz-linear-gradient(90deg, #00c6ff 10%, #0072ff 90%); /* FF3.6+ */
    background: -ms-linear-gradient(90deg, #00c6ff 10%, #0072ff 90%); /* IE10 */
    background: -o-linear-gradient(90deg, #00c6ff 10%, #0072ff 90%); /* Opera 11.10+ */
    background: linear-gradient(90deg, #00c6ff 10%, #0072ff 90%); /* W3C */
    border: 1px dashed yellow;
    width: auto;
    height: 100%;
    min-height: 99.6vh;
    text-align: center;
}

.column {
    width: 42.5vh;
    height: 42.5vh;
    border: 1px dashed #dc143c;
    display: inline-block;
    vertical-align: top;
    margin-top: 12.5%;
    margin-left: 1%;
    position: relative;
    margin-right: 1%;
}

.centeringelement {
    height: 45%;
    width: auto;
    border: 1px dashed white;
}

.resumetitle {
    vertical-align: middle;
    font-size: 1.75em;
    margin-top: 0;
}

span {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}

Answer 1

 $('.column').click(function() { $(this).toggleClass('large') }) 

 .page3 { background: -webkit-linear-gradient(90deg, #00c6ff 10%, #0072ff 90%); /* Chrome 10+, Saf5.1+ */ background: -moz-linear-gradient(90deg, #00c6ff 10%, #0072ff 90%); /* FF3.6+ */ background: -ms-linear-gradient(90deg, #00c6ff 10%, #0072ff 90%); /* IE10 */ background: -o-linear-gradient(90deg, #00c6ff 10%, #0072ff 90%); /* Opera 11.10+ */ background: linear-gradient(90deg, #00c6ff 10%, #0072ff 90%); /* W3C */ border: 1px dashed yellow; width: auto; height: 100%; min-height: 99.6vh; text-align: center; } .column { background:orange; transition: .5s all; width: 42.5vh; height: 42.5vh; border: 1px dashed #dc143c; display: inline-block; vertical-align: top; margin-top: 12.5%; margin-left: 1%; position: relative; margin-right: 1%; } .centeringelement { height: 45%; width: auto; border: 1px dashed white; } .resumetitle { vertical-align: middle; font-size: 1.75em; margin-top: 0; } span { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; } .large { z-index:100000; position: absolute; width: 100%; height: 100%; left: 0; top: -50px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <div class="page3"> <div class="column" id="col1"> <div class="centeringelement"></div> <a class="resumetitle"><span></span>Education</a> </div> <div class="column" id="col2"> <div class="centeringelement"></div> <a class="resumetitle"><span></span>Work Experience</a> </div> <div class="column" id="col3"> <div class="centeringelement"></div> <a class="resumetitle"><span></span>Skills and Achievements</a> </div> </div> 

这个怎么样

 $('.column').click(function () { $(this).toggleClass('large') }) 

 .page3 { background: -webkit-linear-gradient(90deg, #00c6ff 10%, #0072ff 90%); /* Chrome 10+, Saf5.1+ */ background: -moz-linear-gradient(90deg, #00c6ff 10%, #0072ff 90%); /* FF3.6+ */ background: -ms-linear-gradient(90deg, #00c6ff 10%, #0072ff 90%); /* IE10 */ background: -o-linear-gradient(90deg, #00c6ff 10%, #0072ff 90%); /* Opera 11.10+ */ background: linear-gradient(90deg, #00c6ff 10%, #0072ff 90%); /* W3C */ border: 1px dashed yellow; width: auto; height: 100%; min-height: 99.6vh; text-align: center; } .column { transition:.5s all; width: 42.5vh; height: 42.5vh; border: 1px dashed #dc143c; display: inline-block; vertical-align: top; margin-top: 12.5%; margin-left: 1%; position: relative; margin-right: 1%; } .centeringelement { height: 45%; width: auto; border: 1px dashed white; } .resumetitle { vertical-align: middle; font-size: 1.75em; margin-top: 0; } span { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; } .large { width:100%; height:100%; min-height:680px; min-width:680px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <div class="page3"> <div class="column" id="col1"> <div class="centeringelement"></div> <a class="resumetitle"><span></span>Education</a> </div> <div class="column" id="col2"> <div class="centeringelement"></div> <a class="resumetitle"><span></span>Work Experience</a> </div> <div class="column" id="col3"> <div class="centeringelement"></div> <a class="resumetitle"><span></span>Skills and Achievements</a> </div> </div> 

Answer 2

这是示例代码：

 $(document).ready(function(){ $('.column').click(function(){ $(this).css({'width':'100%','margin-left':'0px','margin-right':'0px'}); }); }); 

 .page3 { background: -webkit-linear-gradient(90deg, #00c6ff 10%, #0072ff 90%); /* Chrome 10+, Saf5.1+ */ background: -moz-linear-gradient(90deg, #00c6ff 10%, #0072ff 90%); /* FF3.6+ */ background: -ms-linear-gradient(90deg, #00c6ff 10%, #0072ff 90%); /* IE10 */ background: -o-linear-gradient(90deg, #00c6ff 10%, #0072ff 90%); /* Opera 11.10+ */ background: linear-gradient(90deg, #00c6ff 10%, #0072ff 90%); /* W3C */ border: 1px dashed yellow; width: 100%; height: 100%; min-height: 99.6vh; text-align: center; } .column { width: 42.5vh; height: 42.5vh; border: 1px dashed #dc143c; display: inline-block; vertical-align: top; margin-top: 12.5%; margin-left: 1%; position: relative; margin-right: 1%; } .centeringelement { height: 45%; width: auto; border: 1px dashed white; } .resumetitle { vertical-align: middle; font-size: 1.75em; margin-top: 0; } span { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="page3"> <div class="column" id="col1"> <div class="centeringelement"></div> <a class="resumetitle"><span></span>Education</a> </div> <div class="column" id="col2"> <div class="centeringelement"></div> <a class="resumetitle"><span></span>Work Experience</a> </div> <div class="column" id="col3"> <div class="centeringelement"></div> <a class="resumetitle"><span></span>Skills and Achievements</a> </div> </div> 

Answer 3

尝试这个。 我已经将其扩展到父div的高度，并且也将您的链接下推了。 如果您不希望按下链接，请调整链接的位置。

$(document).ready(function ()
{
    $(document).on('click','.resumetitle',function (e)
    {
        e.preventDefault();
        $(this).prev().animate({
            height:$(this).parent('.column').height()
        },500);
    });
});