我想通过单击fa-arrows-alt图标和单击fa-minus图标,div.panel-dashboard变成全屏,并且它的宽度和高度与窗口的宽度和高度相等,div.panel-dashboard通过动画返回到其第一个大小。
<div class="row">
<div class="col-sm-6">
<section class="panel-dashboard hide1">
<div class="header color-purple-header">
<div class="controls">
<i class="fa fa-close"></i>
<i class="fa fa-minus ml5"></i>
<i class="fa fa-arrows-alt ml5"></i>
</div>
</div>
<div class="body body2 color-purple-body">
text1
</div>
</section>
</div>
<div class="col-sm-6">
<section class="panel-dashboard hide1">
<div class="header color-purple-header">
<div class="controls">
<i class="fa fa-close"></i>
<i class="fa fa-minus ml5"></i>
<i class="fa fa-arrows-alt ml5"></i>
</div>
</div>
<div class="body body2 color-purple-body">
text2
</div>
</section>
</div>
</div>
$(document).ready(function () {
$('.fa-arrow-circle-left').click(function () {
var $win = $(window);
$('.panel-dashboard').animate({ height: $win.height() }, 500);
$('.panel-dashboard').animate({ width: $win.width() }, 500);
});
$('.fa-minus').click(function () {
var $win = $(window);
$('.panel-dashboard').animate({ height: 250px }, 500);
$('.panel-dashboard').animate({ width: '100%' }, 500);
});
});
250px
应该被引用
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fa-arrow-circle-left">fa-arrow-circle-left</div>
<div class="row">
<div class="col-sm-6">
<section class="panel-dashboard hide1">
<div class="header color-purple-header">
<div class="controls">
<i class="fa fa-close"></i>
<i class="fa fa-minus ml5"></i>
<i class="fa fa-arrows-alt ml5"></i>
</div>
</div>
<div class="body body2 color-purple-body">
text1
</div>
</section>
</div>
<div class="col-sm-6">
<section class="panel-dashboard hide1">
<div class="header color-purple-header">
<div class="controls">
<i class="fa fa-close"></i>
<i class="fa fa-minus ml5">fa-minus</i>
<i class="fa fa-arrows-alt ml5"></i>
</div>
</div>
<div class="body body2 color-purple-body">
text2
</div>
</section>
</div>
</div>
<script>
$(document).ready(function() {
var $win = $(window);
$('.fa-arrow-circle-left').click(function() {
$('.panel-dashboard').animate({
height: $win.height(),
width: $win.width()
}, 500);
});
$('.fa-minus').click(function() {
$('.panel-dashboard').animate({
height: "250px",
width: '100%'
}, 500);
});
});
</script>