我有一个绝对定位的div,其位置如下:

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

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

#myDiv {
top: 200%;
}

}


想法是它不在768px窗口宽度以下的视图之外。

当窗口宽度
$('#myDiv').animate({
top: "0%"
},350);


然后,当窗口宽度
$('#myDiv').animate({
    top: "200%"
    },350);


如果#myDiv已从视图中移出动画(最高:200%),并且我将窗口的大小调整为768px以上,则css规则top:0%将被忽略。为什么?

最佳答案

它不会被忽略,而是会被覆盖。这是因为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')

关于javascript - 使用jQuery在窗口/ View 外对div进行动画处理,调整大小时忽略CSS规则,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/32416567/

10-10 14:11
查看更多