Javascript 未应用通过jQuery的CSS

我正在制作一个幻灯片。我使用简单的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);

函数resizeVideo（）{
变量宽度=$（窗口）.width（）；
如果（宽度<620）{
$（'#controls'）.css（'top'，$（'img'）.height（））；
}
否则{
$（'#controls'）.css（'top'，'470'）；
}
}
$（窗口）。调整大小（调整视频大小）；

这样，当大小小于620时，控件将粘在图像的底部。目前阻碍我前进的一些问题是：

每当我从小于620的大小最大化窗口时，图像都会缩小到其原始大小，但

#controls

元素仍保持最大化之前的高度

当我将窗口调整为大于620的大小时，

#控件

也会停留在

345px

附近。实际上，图像的高度更大

每当幻灯片中的图像发生变化并且我当时调整了窗口的大小时，

#控件

将位于所有内容的顶部，即它根本不应用

top:

属性

---

我在一个问题上问了所有这些问题，因为它们都是关于

#controls

元素的，我相信修复一个会自动修复其他元素。任何提示都将不胜感激

认为必须在.resize（）中包装一个闭包函数，例如

$（窗口）.resize（函数（）{resizeVideo（）；}）

另外，由于resizeVideo函数不是一个参考，因此必须使用
（）

对于jquery.css（）函数，他们制作了一些无需字符串即可使用的css挂钩，以便应用css：
$（'#controls'）.css（{top:470+“px”}）
当通过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);

函数resizeVideo（）{
变量宽度=$（窗口）.width（）；
如果（宽度<620）{
$（'#controls'）.css（'top'，$（'img'）.height（）+'px'）；/$height（）返回不带'px'的高度，因此我们需要手动添加它
}否则{
$（'#controls'）.css（'top'，'470px'）；
}
}
$（窗口）。调整大小（调整视频大小）；
确保您选中了不带“px”的it x-browser以满足业务需求。确定。在测试时，我必须记住这一点。谢谢你的提示+1 :)