从左/右/顶部/底部进行动画制作时淡入淡出

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>