我怎樣才能使jquery.css不動畫，而立即進行更改？

Question

下面的所有內容均已在OSX的Chrome中進行了測試。

看一下我正在建立的這個網站上的主要圖像： http : //www.appsbayou.se

正如您在加載頁面時所看到的，圖像看起來像是在“滑動”到正確的位置。 我不要這種行為。

該頁面后面的代碼來自自定義的wordpress主題，在這個問題上我沒有發言權。 我唯一的工作就是“修復圖像，使其不做動畫”。

在源代碼中，我發現這些行是罪魁禍首：

$(this).css("width", new_img_width);
$(this).css("max-width", new_img_width);

其中$(this)引用<img>標記。 這里沒有.animate（）。 那么，為什么用jQuery通過動畫來簡單地更改width / maxwidth呢？我該如何使這些行立即變為呢？

Answer 1

去掉

img {
transition: width 0.5s ease-in-out 0s, 
            left 0.7s ease-in-out 0s,
             right 0.7s ease-in-out 0s;
}  

從

http://www.appsbayou.se/wp-content/themes/customizr/inc/assets/css/orange.min.css?ver=3.1.24

在第15行

Answer 2

如果在圖像上執行“檢查元素”，則會看到該元素包含在采用輪播方案的div集合中。 您可以做幾件事。 一種是編輯頁面HTML並擺脫容器div。 盡管在格式化方面，這可能會產生一些不必要的副作用。

另一個選擇可能是迭代$(this)的父鏈，並開始選擇性地從包含div的類中刪除類。 例如，擺脫center-slides-enabled類，然后看看會發生什么。 在不了解輪播的更多信息的情況下（您正在使用縮小的Javascript包裝器，因此很難知道發生了什么）我無法確切地說說要刪除的正確類是什么，但是要進行一些嘗試，然后-error我認為您應該能夠很快弄清楚您需要做什么。