使用jquery设置div的动画宽度并限制为最大宽度答案

【问题标题】：Animating width of div and limiting to max-width using jquery使用jquery设置div的动画宽度并限制为最大宽度
【发布时间】：2014-03-29 18:01:00
【问题描述】：

我的容器 div 包含两个 div div box1 和 div box2。 box2 是绝对 div，最大宽度为 400px；

html:

<div id="container">
<div class="box1"></div>
<div class="box2 animated"></div>
</div>

css:

#container{position:relative;width:100%;height:100%;background:red;} 

#container #box1{position:relative;width:760px;height:300px;background:blue;margin:0;} 

#container #box2{position:absolute;width:60px;max-width:350px;height:300px;background:yellow;;top:0;}

jQuery:

 $(document).ready(function(){
    var box1width = $(".box1").width();
    var windowWidth = $(window).width();
    var x = windowWidth - (box1width + 350 ) ;
    var wdt = windowWidth - (box1width) ;


    if (".box2").hasClass("animated"){
       if(x > windowWidth ){
       $(".box2").animate({width:'350px'}, 2000); 
       } else { 
       $(".box2").animate({width: wdt+ 'px'}, 2000);
       } 
    } else {

    alert("no animation for box2 nd width remain 60px");
    }

    });

最初这会为我的 box2width 设置动画；现在我想在窗口调整大小时为 box2 宽度设置动画，并将我的 box2 动画宽度限制为最多 350 像素；

【问题讨论】：

您听起来好像这段代码部分工作。但它会抛出错误Uncaught SyntaxError: Unexpected token . 一个工作小提琴会很容易解决问题
你还没有分享animated类..
这对我有用；我不知道在写这个问题时是否有任何错误。实际上我可以使用 window.resize 函数，但我不想在每次 window.resize 时触发方法 hasClass("animated")。
您分享的代码有很多语法错误。它抛出错误Uncaught SyntaxError: Unexpected token . 尝试复制粘贴确切的工作代码.. 或者工作小提琴可以轻松解决问题
这个动画类与css无关，这实际上是一个变量类来指示动画，否则这个cass应该是无动画的；

标签： jquery css jquery-animate window-resize

【解决方案1】：

查看Fiddle

if (!$(".box2").hasClass("animated")) {
     if (wdt >= 60) {
         $(".box2").animate({
             width: '350px'
         }, 2000);
         $(".box2").addClass('animated');
     }
 } else {
         if (wdt <= 350) {
             $(".box2").css('width','60px');
             $(".box2").removeClass('animated');
         }
     }

旁注：不确定这是否正是你想要的，如果没有在下面评论:)

根据 cmets 更新 updated fiddle

$(document).ready(function () {
 anime();
 var resizeTimer;
 window.onresize = function () {
     if (resizeTimer) {
         clearTimeout(resizeTimer);
     }
     resizeTimer = setTimeout(function () {
         anime();
     }, 200);
 }
})
 function anime() {
 var windowWidth = $(window).width();
 var box1width = $(".box1").width();
 var wdt = windowWidth - (box1width);
 if (wdt > 60) {
     $(".box2").stop(true,true).animate({
         width: wdt
     }, 1000);
     $(".box2").addClass('animated');
 } else if($(".box2").hasClass('animated')){
   $(".box2").css('width', '60px');
   $(".box2").removeClass('animated');
 }
}

注意：这只是对你正在尝试做的事情的修复，我更喜欢 css3 转换而不是这个..

【讨论】：

只有当空间超过 350px 时才会产生动画；我想在窗口调整大小时将 box2 设置为 60px 到 350px 之间的动画。这个框的宽度可以是 100px 或 200px 或 350px。
您的问题不清楚..这不是您在问题中提到的内容..您在问题中提到了100px、200px 等。请正确更新问题..顺便说一句，这就是我想出的jsfiddle.net/tilwinjoy/Dzw9t，只有当您正确解释问题时，其他人才能帮助您解决它..
我只是说我的宽度可能在 60px 到 350px 之间；所以它可能是 100 像素或 200 像素或 60 像素到 350 像素之间的任何值；
好的，所以在调整大小时会抛出数百次 resize 事件，如果你在有超过 60px 宽度可用的情况下继续动画，动画将一遍又一遍地开始导致闪烁。你想如何处理那？调整大小后您只想制作一次动画吗？
感谢您的帮助！我部分实现了，box2 宽度是动画的，只需要在窗口调整大小时设置它。