我有一个绝对定位的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/