如何使用jQuery .slideUp（）使一个浮动按钮出现在角落？

问题描述：

我试图让一个按钮向上滑动，并在用户在页面上显示30秒后出现在屏幕的右下角。如何使用jQuery .slideUp（）使一个浮动按钮出现在角落？

该怎么办，我开始用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 
 
}

你在哪里调用'showSurvey（）'？ – Soviut

如果您不反对添加其他库，请尝试animate.css。它会在没有jQuery的情况下做你想做的事情。 https://daneden.github.io/animate.css/ – JonLuca

效果基本show不作元素的举动，但是从底部 –

答

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>

尼斯幻灯片动画隐藏它，你应得的给予好评:) –

如何使用jQuery .slideUp（）使一个浮动按钮出现在角落？

相关推荐