如何使用jQuery .slideUp（）使一個浮動按鈕出現在角落？

Question

我試圖讓一個按鈕向上滑動，並在用戶在頁面上顯示30秒後出現在屏幕的右下角。

該怎麼辦，我開始用DIV隱藏，然後讓它從底部滑出，因爲它出現？

這至今還沒有工作：

<div id="buttonContainer" class=""> 
    <button>Submit</button> 
</div> 

function showSurvey(){ 
 
    \t $('#buttonContainer').slideUp('slow'); 
 
    };

#surveySpot { 
 
\t position: fixed; 
 
\t bottom: 20px; 
 
\t right: 20px 
 
}

Answer 1

JQuery的.slideup()實際上並不移動元素，它只是一個動畫技巧隱藏和顯示元素。

相反，你可以完全用CSS animation都這樣做，不需要jQuery的。您可以創建一個關鍵幀動畫，將元素移動到幀中，然後設置30秒的動畫延遲。

.survey { 
 
    position: fixed; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    padding: 50px; 
 
    background: cornflowerblue; 
 

 
    /* translate off the bottom of the screen */ 
 
    transform: translateY(100%); 
 
    /* call the slideup keyframes and have them take 500 milliseconds */ 
 
    animation: slideup 500ms ease-out forwards; 
 
    /* delay the start of the animation by 5 second, you can use 30 */ 
 
    animation-delay: 5s; 
 
} 
 

 
/* a very simple from/to keyframe we can call with the "animation" property */ 
 
@keyframes slideup { 
 
    from { transform: translateY(100%); } 
 
    to { transform: translateY(0); } 
 
}

<p>Wait 5 seconds for the survey to show...</p> 
 

 
<div class="survey">This is a survey</div>