Question

用户在页面上停留30秒后，我试图让按钮向上滑动并显示在屏幕的右下角。

如何开始隐藏div，然后让它从底部滑入？

到目前为止还没有奏效：

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

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

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

Answer 1

JQuery＆＃39; .slideup()实际上并没有移动元素，它只是隐藏和显示元素的动画技巧。

相反，您可以使用CSS animation完全执行此操作，根本不需要jQuery。您可以创建关键帧动画以将元素移动到帧中，然后设置30秒的动画延迟。

＆＃13;

.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); }
}

＆＃13;

<p>Wait 5 seconds for the survey to show...</p>

<div class="survey">This is a survey</div>

＆＃13;

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

1 个答案: