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过渡...

动画div的宽度并使用jquery限制为max-width

1 个答案: