元素的CSS如下jQuery的聲明，而不是樣式表

Question

我有這個最初在我的CSS樣式表：

@media only screen and (min-width: 901px){ 
    #main_panel { 
      width: 750px; 
     } 
    } 

@media only screen and (min-width: 300px) and (max-width: 900px), handheld { 
    #main_panel { 
      width: 500px; 
     } 
    } 

再經過一些用戶交互，這jQuery的命令改變這個CSS-值：

$("#collapse").click(function() { 
     if ((($(window).width()) >= 600) && ($(window).width() <= 900)) { 
      $("#main_panel").animate({width: "500px"}, 'slow'); 
     } 
}); 

當我調整窗口大小超過901px時，它仍然遵循jQuery最近的聲明，而不是901px樣式表中的CSS聲明。

如何在調整窗口大小時優先考慮CSS聲明？
或者你如何處理這個更好？

請不要讓我依靠$（window）.resize（）事件永遠:)這不顧CSS。

Answer 1

由於您使用的是jQuery Animate，因此元素樣式將直接接收寬度值。

就像這樣：！

<el id="mainpanel" style="width: 500px"> 

這將始終覆蓋，除非您使用的元素上的任何CSS重要：

width: 100px !IMPORTANT; 

http://codepen.io/rafaelcastrocouto/pen/suEHn（DEMO）

請注意，您應該避免因爲如果你需要的話你將無法改變它。

Answer 2

** 編輯 **

如果你想在CSS優先，仍然可以製作動畫，你可能需要的是這樣的：

http://jsfiddle.net/2Fe22/1/

1）創建一個「正常」面板類和它的風格它

.panel {width:750px;height:400px} 

2）創建一個摺疊類和風格它

.collapsed {width:500px} 

3）創建一個函數來從CSS讀取的摺疊和正常寬度：

function getClassWidth(aClass) { 
    return parseInt($("<div />").addClass(aClass).css('width')); 
} 

4）處理由第一動畫，然後點擊（在動畫的結尾）添加或刪除了「崩潰」類的面板並移除動畫留下內嵌樣式：

var collapsed=false; 

$("#collapse").click(function() { 
    collapsed=!collapsed; 
    if(collapsed) { 
     $("#main_panel").animate({width: (getClassWidth('collapsed'))+"px"}, 'slow',afterAnimation); 
    } else { 
     $("#main_panel").animate({width: (getClassWidth('panel'))+"px"}, 'slow',afterAnimation); 
    } 
}); 

function afterAnimation() { 
    if(collapsed) $("#main_panel").addClass("collapsed").removeAttr("style"); 
    else $("#main_panel").removeClass("collapsed").removeAttr("style"); 
} 

你這樣做，因此，如果用戶調整窗口大小的d css會正確更改屏幕更新。

** OLD POST（僅供參考） **

如果設置使用jQuery你可以去設置他們這樣的尺寸：

var collapsed=false; 

$(window).resize(calculateNewSizes); // When resized 
calculateNewSizes(); // At startup 

function calculateNewSizes() { 
    if(collapsed) { 
     // if screen width < xxx set elemt width to yyy, etc.. collapsed version 

    } else { 
     // if screen width < xxx set elemt width to yyy, etc.. 
    } 
} 

// This toggles the collapsed state if user clicks on an element 
$("#collapse").click(function() { 
     collapsed=!collapsed; 
     calculateNewSizes(); // or do the animation here 
}); 

這個腳本應該儘可能快地稱爲可能後開始的所有元素進行調整大小，以避免FOUC。

<div class="to be resized"> 
    <script> 
    //do the $(window).resize(...) here 
    </script> 
... all other stuff </div>. 

警告，這個代碼是UNTESTED。這只是爲了展示一個想法。