如何讓jquery.css不生成動畫，而是立即做出更改？

下面的所有內容均在OSX上的Chrome中進行測試。如何讓jquery.css不生成動畫，而是立即做出更改？

看看這個網站的主要形象，我的建築：http://www.appsbayou.se

正如你可以看到當加載頁面時，圖像看起來像它的「滑」到它的正確位置。我不想要這種行爲。

此頁面背後的代碼是從定製WordPress主題，並在這件事上我沒有發言權。我唯一的工作就是「修復圖像，使其不會做動畫」。

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

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

其中$(this)指<img>標籤。這裏沒有.animate（）。那麼爲什麼簡單地改變寬度/最大寬度與jQuery這樣做與動畫，我怎樣才能使這些線路瞬間呢？

來源

2014-10-29 Weblurk

看起來有可能是CSS3動畫 – 2014-10-29 02:30:53

如果不是的JavaScript，嘗試尋找在CSS的width屬性的任何轉換。 – 2014-10-29 02:30:53

刪除

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行

來源

2014-10-29 02:35:53 andrew

很好的答案，但是黑客可能會被其他東西包含的縮小的實用程序css腳本可能會有點矯枉過正。更好的辦法是創建一個像'img.noanimate {transition：none; }'並將該類添加到傳送帶圖像標籤。 – par 2014-10-29 02:37:57

@weblurk，他說什麼^^ :) – andrew 2014-10-29 02:39:02

@andrew很好的回答和評論。完美地解決了這個問題。 – Weblurk 2014-10-29 02:43:49

如果您在圖像上執行「檢查元素」，您會看到它包含在一組採用輪播方案的div中。有幾件事你可以做。一種是編輯頁面HTML並擺脫容器div。儘管在格式化方面可能會有一些不需要的副作用。

另一個選項可以是迭代起來$(this)母鏈，並開始選擇性地從包含div刪除類。例如擺脫center-slides-enabled班，看看會發生什麼。在不瞭解旋轉木馬的結構的更多信息的情況下（您正在使用縮小的Javascript包裝器，因此很難知道發生了什麼），我無法確切地說出正確的類是如何擺脫的，但是通過一些試驗， - 我認爲你應該能夠很快找出你需要做的事情。

來源

2014-10-29 02:34:31 par

如何讓jquery.css不生成動畫，而是立即做出更改？

回答

相關問題