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

Question

我的容器 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 动画宽度限制为最多 350px；

Answer 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');
         }
     }

旁注:不确定这是否正是您想要的，如果不是，请在下方评论:)

根据评论更新 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 转换。