兄弟姐妹沒有采取最高命令

Question

我的div text-button不符合正確的餘量，我想在其兄弟分區下。我設置了position: absolute;，因爲每次我使它相對時，jQuery動畫都不起作用。我希望text-button在頁面上出現大約80％，然後動畫顯示高達70％，或者從兄弟分區text中獲得20％的margin-top，然後使它增加10％。

我在做什麼錯？

$(function textdelays(){ 
 
    $('#text-title').delay(600).fadeIn(1200); 
 
    $('#text').delay(600).fadeIn(1200); 
 
    $('#text-button').delay(900).fadeIn(1200); 
 
    $('#text-button').animate({'top': '70%'}, 1000); 
 
});

.gray { 
 
    background-color: #CCC; 
 
    width: 100%; 
 
    height: 600px; 
 
} 
 
.content-wrap { 
 
    margin: 10% 25%; 
 
    position: absolute; 
 
} 
 
#text-title { 
 
    color: blue; 
 
    display: none; 
 
    position: relative; 
 
/* margin: 0 25%;*/ 
 
    font-size: 1.3em; 
 
} 
 
#text { 
 
    color: green; 
 
    display: none; 
 
    position: relative; 
 
    margin-top: 5%; 
 
    font-size: 1.1em; 
 
} 
 
    #text-button { 
 
    position: relative; 
 
    wdith: 100%; 
 
    top: 80%; 
 
    display: none; 
 
    cursor: pointer; 
 
} 
 
.border-span { 
 
    border: 2px solid #000; 
 
    padding: 15px 10px; 
 
    color: #FFF; 
 
    font-weight: bold; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="gray"> 
 
    <div class="content-wrap"> 
 
    <div id="text-title">fdsfdasfdaffasG<br> 
 
    DIGITAL AGENCY</div> 
 
    <div id="text"> 
 
    fdfdsf sdf asddd dddddd ddddd dddddd fdfsdaf dffdaf fdf fsda fdfas fdf dasaf f fdaa fdfdaf a dfdffd fdfffdffd fdfd dfdaad fda sd adgdg dggagdg gdfgfg agf gfgfag fgfg gfag fggf fgfgag f gfg ag afgfgfgfga fg. 
 
    </div> 
 
    <div id="text-button"><span class="border-span">More About Us</span></div> 
 
    </div> 
 
</div>

Answer 1

不太清楚我有你需要的東西：https://jsfiddle.net/ttfkg8ax/1/

我對您的按鈕div設置position:absolute;和固定都在jQuery和對CSS的top:;值。我希望我能得到你想要的結果。

的jQuery：

$(function textdelays(){ 
    $('#text-title').delay(600).fadeIn(1200); 
    $('#text').delay(600).fadeIn(1200); 
    $('#text-button').delay(900).fadeIn(1200); 
    $('#text-button').animate({'top': '120%'}, 1000); 
}); 

CSS：

#text-button { 
    position: absolute; 
    width: 100%; 
    top: 140%; 
    display: none; 
    cursor: pointer; 
} 

你必須設置top:140%;，因爲以下原因：

你text-button DIV是子元素您content-wrap DIV ，這正好是lightblue彩色div的大小這JSFiddle：https://jsfiddle.net/ttfkg8ax/2/。設置top:140%;使您的按鈕在您的父div下面移動40％的大小。

爲了讓您的按鈕內下降您content-wrap DIV，使你能夠使用top:80%;，那麼你需要指定的高度到content-wrap元素，像這樣：https://jsfiddle.net/ttfkg8ax/3/