javascript - 使用 jQuery 将 div 动画移出窗口/ View ，调整大小时忽略 css 规则

Question

我有一个绝对定位的 div，定位如下:

#myDiv {
position: absolute;
top: 0%;
height: 500px;
}

@media screen and (max-width: 768px){

#myDiv {
top: 200%;
}

}

这个想法是，它在 768px 窗口宽度以下的 View 之外。

当窗口宽度 < 768px 时，我使用带有按钮的 jQuery animate 将 div 动画化到 View 中:

$('#myDiv').animate({
top: "0%"
},350);

然后，当窗口宽度 < 768px 时，我再次使用另一个按钮将其动画返回 View :

$('#myDiv').animate({
    top: "200%"
    },350);

如果 #myDiv 已在 View 之外 (top:200%) 进行动画处理，并且我将窗口大小调整到 768px 宽度以上，则 css 规则 top:0% 为被忽略。为什么？

Answer 1

它不是被忽略，而是被覆盖。这是因为jQuery's animate函数修改元素的内联样式，该样式优先于任何 css 规则。

CSS 中的 !important 修饰符会告诉你的内联样式不优先。

top: 0% !important;

但是这不起作用，因为它还会覆盖动画函数中的 top: 200%。

您可以收听 matchMedia变化。

或者您可以简单地通过切换类来处理动画。

@media screen and (max-width: 768px){
  #myDiv {
    top: 200%;
    transition: top 0.35s
  }

  #myDiv.visible {
    top: 0%
  }
}

JS:

$('#myDiv').addClass('visible')