從左/右/頂部/底部進行動畫製作時淡入淡出

Question

我試圖做一個轉換，其中設置爲「display：none」的div淡入並從左側/右側移動到頁面中央，右/上/下。

我怎樣才能讓它同時淡入和動畫（{left：}）？

我現在的代碼首先淡入，然後爲它製作動畫。

$("#button").click(function(){ 
$("#text").fadeIn(1000, function(){ 
    $("#text").animate({ "left": "+=50%" }, "slow") 
    }) 
}) 

與ID 文本的 DIV的

Current JSFiddle

Answer 1

使用符號像我下面的代碼片段在同一時間兩個參數動畫。注：我使用opacity作爲淡入淡出的動畫。 （並使用position: absolute爲動畫元素）

$(document).ready(function() { 
 
    $("#button").click(function() { 
 
    $("#text").animate({ 
 
     left: '+=50%', 
 
     opacity: '1' 
 
    }, 1000); 
 
    }) 
 
})

#button { 
 
    display: inline-block; 
 
    border-radius: 5px 5px 5px 5px; 
 
    border: 2px solid deepskyblue; 
 
    color: white; 
 
    background-color: black; 
 
    padding: 2px; 
 
    margin: 2px; 
 
} 
 

 
#text { 
 
    color: deepskyblue; 
 
    font-size: 2vw; 
 
    position: absolute; 
 
    display: inline-block; 
 
    top: 60px; 
 
    opacity: 0; 
 
    left: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="button"> 
 
    Move 
 
</div> 
 

 
<div id="text"> 
 
    Hello there 
 
</div>

Answer 2

位置應該是絕對的。這裏是你的代碼

$(document).ready(function() { 
 
    $("#button").click(function() { 
 
    $("#text").fadeIn(1000, function() { 
 
     $("#text").animate({ 
 
     "left": "+=50%" 
 
     }, "slow") 
 
    }) 
 
    }) 
 
})

#button { 
 
    display: inline-block; 
 
    border-radius: 5px 5px 5px 5px; 
 
    border: 2px solid deepskyblue; 
 
    color: white; 
 
    background-color: black; 
 
    padding: 2px; 
 
    margin: 2px; 
 
} 
 

 
#text { 
 
    color: deepskyblue; 
 
    fontsize: 2vw; 
 
    position: absolute; 
 
    display: inline-block; 
 
    top: 60px; 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="button"> 
 
    Move 
 
</div> 
 

 
<div id="text"> 
 
    Hello there 
 
</div>