2012-11-15 35 views
0

所以我有一個幻燈片塊(它的響應),我已經爲這個塊設置了min-height: 315px,我真的需要它,但是當我調整窗口大小時,我需要順利地減少min-height,現在我寫了jQuery代碼,所以它的工作,但它的醜陋tbh。根據我的div高度更改最小高度

function minHeightBehavior(width) { 
     width = parseInt(width); 
     element = $('#block-views-home-page-slider-block'); 
     sliderHeight = $('.views-field-slider').height(); 
     element.css('min-height', '315px'); 
     if (width >= 769 && width < 960) { 
      console.log(sliderHeight); 
      element.css('min-height', sliderHeight +'px'); 

     } 

    } 

現在滑塊下方塊,是跳躍起來,其原因例如當窗口screen width爲900,element height是300,如果screen width是899,element height是300了。之後,如果screen width是898,element height是299等。
也許有更好的解決方案呢?

回答

2

使用.animate方法。

並開始使用var局部變量

function minHeightBehavior(width) { 
     var width = parseInt(width), 
      element = $('#block-views-home-page-slider-block'), 
      sliderHeight = $('.views-field-slider').height(), 
      minHeight = 315; 

     if (width >= 769 && width < 960) { 
      minHeight = sliderHeight; 
     } 

     element.animate({height: minHeight + 'px'}, 500, function(){ 
      $(this).css({'min-height': minHeight + 'px', 'height':'auto'}); 
     }); 

    } 
+0

要去嘗試一下 –

0

是否沒有辦法將最小高度設置爲百分比?而不是使用像素。

+0

沒錯:<沒辦法,我不能把它太任何百分比 –