文字淡入淡出同時

Question

道歉，如果這看起來很簡單，但我似乎無法得到這個工作。

我想有一個div，並在該div中的文本淡入，滑動和淡出所有在一個議案。到目前爲止，我可以讓文本淡入並在一個動作中滑動，但是，在幻燈片淡出動畫之前，文本會暫停。

$(document).ready(function() { 
    $("button").click(function(){ 
$('#theDIV').css({'display':'block','opacity':'0'}).animate({'opacity':'1','top':'-=50px'}, 1500); 
    $('#theDIV').css({'display':'block','opacity':'1'}).animate({'opacity':'0','top':'-=50px'}, 1500); 
    }); 
}); 

---

#theDIV{display:none; position:relative;} 

---

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<button>Start Animation</button> 
<br> 
<br> 
<div id="theDIV">Some text</div> 

Answer 1

使用變換而不是頂部風格：

$('#theDIV').css({'display':'block', 'opacity':'0'}).animate({'opacity':'1','transform':'translateY(-50px)'}, 1500); 
    $('#theDIV').css({'display':'block', 'opacity':'1'}).animate({'opacity':'0','transform':'translateY(-50px)'}, 1500); 

Answer 2

$(document).ready(function() { 
 
    $("button").click(function(){ 
 
$('#theDIV').css({'display':'none','top':'50px'}); 
 
$('#theDIV').css({'display':'block','opacity':'0'}).animate({'opacity':'1','top':'-=50px'}, 1500); 
 
setTimeout(function(){ $('#theDIV').css({'opacity':'1'}).animate({'opacity':'0','top':'-=50px'}, 1500); }, 1500); 
 
    }); 
 
});

#theDIV{display:none; position:relative;margin:30px 150px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button>Start Animation</button> 
 
<br> 
 
<br> 
 
<div id="theDIV">Some text</div>

Answer 3

您收到的所有答案似乎都行之有效，例外情況是他們使用Javascript來運行動畫（和top屬性），這兩者都是與您的微型交互的不良做法。

我使用JavaScript vs CSS鏈接你關於動畫的very good articles。
和Paul Irish的第二個Why Moving Elements With Translate() Is Better Than Pos:abs Top/left。

此處僅使用toggle class & Keyframes來運行動畫。

$(document).ready(function() { 
 
    $("button").click(function(){ 
 
    $('.show-up-and-fade').toggleClass('animate'); 
 
    }); 
 
});

.show-up-and-fade { 
 
    opacity: 0; 
 
    transform: translateY(30px); 
 
} 
 

 
.show-up-and-fade.animate { 
 
    animation: show-up-and-fade 2s forwards; 
 
} 
 

 
@keyframes show-up-and-fade { 
 
    50% { 
 
     opacity: 1; 
 
    } 
 
    100% { 
 
     opacity: 0; 
 
     transform: translateY(-30px); 
 
    } 
 
}

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

 
<button>Start Animation</button> 
 

 
<div class="show-up-and-fade">animated text</div>

---

希望它會幫助你的！