使用jQuery在窗口/視圖外對div進行動畫處理，調整大小時忽略CSS規則

Question

我有一個絕對定位的div，其位置如下：

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

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

#myDiv {
top: 200%;
}

}

想法是它不在768px窗口寬度以下的視圖之外。

當窗口寬度<768px時，我使用jQuery對div進行動畫處理，使其使用jQuery進行動畫處理：

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

然后，當窗口寬度<768px時，我再次使用另一個按鈕將其動畫出視圖。

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

如果#myDiv動畫超出了視線范圍（頂部：200％），並且我將窗口的大小調整為768px以上，則css規則top:0%被忽略。 為什么？

Answer 1

它不會被忽略，而是會被覆蓋。 這是因為jQuery的動畫函數修改了元素的內聯樣式，該樣式優先於任何CSS規則。

CSS中的!important修飾符將告訴您的內聯樣式不優先。

top: 0% !important;

但是，這將不起作用，因為它還會覆蓋top: 200%動畫函數中的top: 200% 。

您可以收聽matchMedia的更改。

或者，您也可以通過切換類來簡單地處理動畫。

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

  #myDiv.visible {
    top: 0%
  }
}

JS：

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