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秒のアニメーション遅延を設定することができます。あなたは `showSurveyを（）`呼び出している

.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>