具有全屏扩展 div 框的三列菜单的平滑 JQuery 动画？答案

【问题标题】：Smooth JQuery animations for three-column menu with fullscreen expanding div boxes?具有全屏扩展 div 框的三列菜单的平滑 JQuery 动画？
【发布时间】：2014-06-04 01:16:25
【问题描述】：

对于全屏三栏菜单，我创建了三个绝对定位的 div 框，并使用 JQuery 选择器和切换命令使它们中的每一个都水平扩展为全屏。它可以工作，但我想让动画顺利进行。我怎么能这样做？

这是JSFiddle 代码。

这是 HTML 代码：

<body>
    <div id='controls' style="background-color: green;" onclick="fullscreen();">
    </div>
    <div id='controls_002' style="background-color: yellow;" onclick="fullscreen_002();">
    </div>
    <div id='controls_003' style="background-color: purple;" onclick="fullscreen_003();">
    </div>

这是 JQuery 代码：

    $(document).ready(function(){
    $('.wrapper div').click(function() {
    $(this).toggleClass('active');
    $(this).siblings().not(this).toggleClass('hide');
});
});

这是 CSS 代码：

    .wrapper{
    top: 0px;
    left: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    position: absolute;
}

.blue{
    width: 33.33333333%;
    height: 100%;
    cursor: pointer;
    background: blue;
}

.red{
    width: 33.33333333%;
    height: 100%;
    cursor: pointer;
    background: red;
}

.green{
    width: 33.33333333%;
    height: 100%;
    cursor: pointer;
    background: green;
} 

div{
    float: left;
}


.active{
    height: 100%;
    width: 100%;
}

.hide{
    display: none;
}

【问题讨论】：

标签： jquery html fullscreen expand smooth

【解决方案1】：

或者使用简单的 jQuery 代码，无需更改您的小提琴 css 代码
Fiddle

    <script type="text/javascript">
$(document).ready(function(){
    $('.wrapper div').click(function() {
        $(this).toggleClass('go')
        if($(this).hasClass('go')){
          $(this).animate({'width':'100%'},{
              duration:1000,
              step:function(gox){
                  var width = gox < 100 ? (100 - gox) / 2 : 0;
                  $(this).siblings().css('width', width + "%"); 
                  }
              })
        }else{
            $('.wrapper div').animate({'width':'33.33%'},1000)
        }
    });
});
</script>

【讨论】：

非常感谢！您的解决方案最适合三个面板在我的网站设计中的表现。

【解决方案2】：

您应该尝试将 CSS 过渡添加到 div，除非您确实需要对旧浏览器的支持。

.wrapper div {
   -webkit-transition: all 1s;
   transition: all 1s;
}

我还为 div 添加了绝对位置，因为浮动似乎会触发一些故障动画。最后但并非最不重要的一点，用 z-index 将“活动”div 放在顶部

http://jsfiddle.net/tSk3Z/10/

【讨论】：

非常感谢！我会为我的下一个任务保存你的解决方案。

【解决方案3】：

CSS 解决方案可能是最好的方法，但如果您仍在寻找 jquery 解决方案，您可以使用带有 step-function 的 animate 方法。

$(document).ready(function(){
    $('.wrapper div').click(function() {
        var obj = $(this),
            siblings = obj.siblings();
        obj.animate(
            {width: "100%"}, 
            {
                duration: 5000,
                step: function(now){
                    var width = now < 100 ? (100 - now) / 2 : 0;
                    siblings.css('width', width + "%");                    
                }
            }
        );
    });
});

http://jsfiddle.net/tSk3Z/11/

您可能需要根据需要调整持续时间值

【讨论】：

非常感谢！您的解决方案也很有帮助。