Javascript Jquery将div设置为100%高度和宽度的动画_Javascript_Jquery_Css_Html

Javascript Jquery将div设置为100%高度和宽度的动画

javascript jquery css html

Javascript Jquery将div设置为100%高度和宽度的动画,javascript,jquery,css,html,Javascript,Jquery,Css,Html,我正在用HTML5和Jquery设计一个日历。我的代码是 HTML <body> <div id="PageContainer"> <div id="Calendar"> <div id="MonthBar">February 2014</div> <div class="DayHeadding">Monday</d

我正在用HTML5和Jquery设计一个日历。我的代码是

HTML

<body>
        <div id="PageContainer">
            <div id="Calendar">
                <div id="MonthBar">February 2014</div>
                <div class="DayHeadding">Monday</div>
                <div class="DayHeadding">Tuesday</div>
                <div class="DayHeadding">Wednesday</div>
                <div class="DayHeadding">Thursday</div>
                <div class="DayHeadding">Friday</div>
                <div class="DayHeadding">Saturday</div>
                <div class="DayHeadding">Sunday</div>
                <div class="MonthDay NoMonthDay"></div>
                <div class="MonthDay NoMonthDay"></div>
                <div class="MonthDay NoMonthDay"></div>
                <div class="MonthDay NoMonthDay"></div>
                <div class="MonthDay NoMonthDay"></div>
                <div class="MonthDay NoMonthDay"></div>
                <div class="MonthDay">1</div>
                <div class="MonthDay">2</div>
                <div class="MonthDay">3</div>
                <div class="MonthDay">4</div>
                <div class="MonthDay">5</div>
                <div class="MonthDay">6</div>
                <div class="MonthDay">7</div>
                <div class="MonthDay">8</div>
                <div class="MonthDay ToDay">9</div>
                <div class="MonthDay">10</div>
                <div class="MonthDay">11</div>
                <div class="MonthDay">12</div>
                <div class="MonthDay">13</div>
                <div class="MonthDay">14</div>
                <div class="MonthDay">15</div>
                <div class="MonthDay">16</div>
                <div class="MonthDay">17</div>
                <div class="MonthDay">18</div>
                <div class="MonthDay">19</div>
                <div class="MonthDay">20</div>
                <div class="MonthDay">21</div>
                <div class="MonthDay">22</div>
                <div class="MonthDay">23</div>
                <div class="MonthDay">24</div>
                <div class="MonthDay">25</div>
                <div class="MonthDay">26</div>
                <div class="MonthDay">27</div>
                <div class="MonthDay">28</div>
                <div class="MonthDay NoMonthDay"></div>
            </div>
        </div>
    </body>

和Jquery

$(document).ready(function() {
    $(".MonthDay").click(function(evt) {
        // Animate this div to 100% width and 100% height to cover the whole screen and hide every thing
    });
});

当单击任何.MonthDay div a时，如果希望通过一个漂亮的动画将其最大化到全屏，只需将其扩展到四个方向，并占据整个屏幕

按相应的方向或方向将所有内容推出屏幕

将div扩展到其他内容上

我怎么能做到？请帮帮我

试试看。CSS“唯一”解决方案，您只需添加和删除CSS类

.MonthDay.fullSize{
   position: absolute;
   top: 10%;
   left: 0;
    z-index: 2;
   height: 100% !important;
   width: 100% !important;
   transition: all 1s;
}

和JavaScript方面：

$(".MonthDay").click(function(evt) {
        $(this).addClass('fullSize');
});

下面是一个简单的jQuery动画，可以实现这一点

$('.MonthDay').on('click', function(e) {
    $(e.target).animate({width: '100%', height: 500}, 500);
});

height:100%

与

width:100%

的工作方式不同，因此您可以像上面的示例中那样设置固定高度，或者缓存某个父元素的高度并使用该高度

这里有一个小把戏：

你可以使用一个插件创建一个屏幕大小的弹出窗口，并用你想要的任何信息填充它

在这里，我使用jqueryui对话框来显示弹出窗口（虽然不是全屏），但是您可以使用任何其他插件

$(".MonthDay").click(function(evt) {
    $("#dialog").text("Clicked on " + $(this).text());
    $("#dialog").dialog();
});

将以下类添加到css中

.full {
    height:100% !important;
    width:100% !important;
}

然后使用以下jquery

$(document).ready(function () {
    $(".MonthDay").click(function (evt) {
        $(this).toggleClass("full");
    });
});

这将在单击时调整为100%，再次单击时恢复为正常大小

请参阅上的演示

尝试使用位置：固定、顶部和底部属性或flexbox。您想对全屏框做什么？是否确实要展开单元格？或者你是不是想打开一个屏幕大小的盒子，里面有当天的信息？

$(document).ready(function () {
    $(".MonthDay").click(function (evt) {
        $(this).toggleClass("full");
    });
});