在jQuery中爲「body」標籤設置動畫效果不會產生任何效果

-1

因此，我網站導航欄上的一個按鈕會從頂部向下顯示一個小灰色標籤，告訴您有關該網站的信息。下面是我使用的動畫代碼：在jQuery中爲「body」標籤設置動畫效果不會產生任何效果

var aboutMenu = function(){ 

    $(".aboutButton").click(function(){ 

     $("body").animate({top: "42px"}, 200); 
     $(".about").animate({top: "0px"}, 200); 

    }); 

} 

$(document).ready(aboutMenu);

的想法是，我的網站的主體，其所有的內容一起，向下移動42個像素。這是在「約」類中的內容向下移動以使其在屏幕上可見時。如果您點擊「關於」按鈕，所發生的一切就是灰色標籤向下移動，但身體保持在原位。這通常不會成爲問題，除了該選項卡遮擋導航欄的其餘部分。

下面是一些更相關的代碼（如果需要）：

HTML：

<div class = "about"> 

    <p align = "center">placeholder text</p> 

</div>

和實際的鏈接：

<li> <a class = "aboutButton">About this website</a></li>

CSS：

.about{ 
    background-color: gray; 
    top: -42px; 
    height: 42px; 
    position: fixed; 
} 

.about p{ 
    color: white; 
} 

.aboutButton{ 
    cursor: pointer; 
}

來源

2014-07-25 Felmire

你身體的CSS在哪裏？它至少需要'位置：...'來動畫頂部。 – putvande

'top'，'bottom'，'left'和'right'與'position'一起工作。你是否定義了「身體」？ – melancia

@putvande謝謝，解決了它。我把立場設置爲親戚，現在都很好。 – Felmire

正如我的評論所述，爲了能夠對top（或其他職位）進行動畫製作，您需要設置一個position: ...（例如， position: relative;。

來源

2014-07-25 16:35:20 putvande

在jQuery中爲「body」標籤設置動畫效果不會產生任何效果

回答

相關問題