通過jQuery不應用CSS

Question

我正在製作一個幻燈片響應的過程。我正在使用簡單的jQuery來實現這一點。我的邏輯是：

如果窗口寬度爲< 620，請通過jQuery對CSS進行更改。
其他
組默認（固定）CSS

我有誰擁有top:470px固定的CSS一個元素時窗口是正常大小。如果窗口大小低於620，我已將其更改爲相對於圖像大小（窗口大小改變）。這裏是我的代碼：

function resizeVideo() { 
    var width = $(window).width(); 
    if(width < 620) { 
    $('#controls').css('top', $('img').height()); 
    } 
    else { 
    $('#controls').css('top', '470'); 
    } 
} 
$(window).resize(resizeVideo); 

這樣的管制措施，將粘在圖像的底部時，大小小於620部分被停止了我的問題，現在是：

1. 每當我從小於620的尺寸最大化窗口時，圖像會縮回到其原始尺寸，但#controls元素保持與最大化之前相同的高度。

2. 當我將窗口大小調整到大於620的大小時，#controls也會在實際上保持在345px左右的某處，圖像的高度會更大。

3. 每當幻燈片中的圖像發生變化，我在此時調整窗口大小時，#controls就會在所有內容的頂部，即它根本不應用top:屬性。

我也問過所有這些疑問在單一的問題，因爲所有的人都對#controls元素，我相信，解決了一個會自動修復等。任何指針將不勝感激！

Answer 1

認爲你必須在.resize（）例如$(window).resize(function(){ resizeVideo(); });。

也因爲功能resizeVideo是不是你將有()

對於jQuery的的.css（）他們所做的，你可以不字符串使用一些CSS鉤子，這樣申請的CSS它要調用的函數的引用將是： $('#controls').css({top: 470 + "px"});

Answer 2

當通過jQuery操縱css時，需要'px'後綴。

function resizeVideo() { 
    var width = $(window).width(); 
    if(width < 620) { 
    $('#controls').css('top', $('img').height()+'px'); // $.height() returns the height without 'px' - so we need to add it manually 
    } else { 
    $('#controls').css('top', '470px'); 
    } 
} 
$(window).resize(resizeVideo);