jquery 定时 div 动画

Question

我有以下2个功能：

  function showMessage(){
    $('#myBox').animate({
    opacity: 'show',
    top:0,
    },1200)
}

function hideMessage(){
    $('#myBox').animate({
    opacity: 'hide',
    top: -200,
    },1200)
}

如果我将它们分配给一个按钮，它们都可以正常工作。

我想做的是每分钟（例如）执行showMessage函数，然后在showMessage函数执行后10秒执行showMessage函数。

有人可以帮忙吗？

我对 setInterval 和 setTimeouts 感到困惑。

此致，

jmcall10

Answer 1

我想这个结果是你所期望的。

  function time() {
    this.time = 'sec';
  }
  function timeCheck(callback) {
    setInterval(() => {
      console.log(this.time)
    }, 1000)
    callback()
  } // Countdown Checker, Don't edit it.

  function show() {
    setInterval(() => {
      $('#myBox').animate({
        opacity: 'hide',
        top: -200
      }, 1200)
      console.log('show fx')
      setTimeout(() => {
        $('#myBox').animate({
          opacity: 'show',
          top: 0
        }, 1200)
      }, 1000)
    }, 10000)
  }

  timeCheck(time)
  show()

* {
  margin: 0 auto;
  color: white;
}
div {
  background-color: darkgreen;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: fixed;
  display: flex;
  flex-flow: column;
  justify-content: center;
  text-align: center;
}

<div id="myBox">
  This div will be gone after 10 seconds, Timed out 1 second and shows again to 1.2 seconds speed.
</div>

<script src="http://code.jquery.com/jquery-3.3.1.js"></script>

Answer 2

另一种可能的方法是使用 2 个 setTimeout 时间：60 秒和 10 秒（隐藏和显示时间）将显示转换委托给 CSS。

这是代码（在此演示中，我将 waitingTime 的时间更改为 10s，将 showtime 的时间更改为 4 秒，这样您就不必等待太久才能看到代码运行，但您可以根据需要更改这些时间想要):

var waitingTime = 10000,
    showTime    = 4000,  
    i           = true;

var showMessage = function(){
    $(".myBox").toggleClass("show")
    setTimeout(showMessage, (i) ? showTime : waitingTime);
    i = !i;
};

setTimeout(showMessage, waitingTime);

.myBox{
  background-color:#ff0000;
  position:absolute;
  height:200px;
  box-sizing: border-box;
  padding:20px;
  left:0;
  right:0;


  opacity:0;
  top:-200px;
  transition: all 1.2s ease-out;
}

.show{
  opacity:1;
  top:0;
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<div class="myBox">Hello world!</div>

Answer 3

我建议不要使用 jQuery - 或任何其他 JavaScript - 你应该考虑使用 CSS 动画；虽然基于百分比的关键帧可能有点不精确：

#mybox {
  /* taking the element out of the document flow: */
  position: absolute;
  /* positioning the element on-screen to start: */
  top: 0.5em;
  /* this is the shorthand, and equivalent to:
  animation-duration: 60s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-name: notificationPopup; */
  animation: 60s linear 0s infinite notificationPopup;
}

@keyframes notificationPopup {
  /* the animation can modify multiple properties,
     but since the only property we need to modify
     in order to have it appear/disappear is the
     'transform' property, that's all we change: */
  0% {
    /* the first keyframe, we maintain the position: */
    transform: translateY(0);
  }
  16.3% {
    /* 16.6% is about ten seconds of the 60s (60 seconds/1 minute),
       here we ensure the animation between visible and hidden doesn't
       occur too soon by creating another keyframe 0.3 seconds
       beforehand: */
    transform: translateY(0);
  }
  16.6% {
    /* here, at approximately the ten-second mark, we create a keyframe
       that hides the element (moving it out of the viewport): */
    transform: translateY(-120%);
  }
  99.7% {
    /* because we show the element at 0%, we again create a keyframe
       0.3s before that point, to prevent premature movement: */
    transform: translateY(-120%);
  }
}

@import url('https://fonts.googleapis.com/css?family=Roboto');
*,
::before,
::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  font-size: 1rem;
  color: #000;
  font-family: Roboto, Calibri, Helvetica, Arial, sans-serif;
}

#mybox {
  position: absolute;
  top: 0.5em;
  left: 10vw;
  width: 80vw;
  border: 2px solid limegreen;
  padding: 0.5em;
  border-radius: 1em;
  background-color: #fff;
  box-shadow: 0 0 15px 5px #666;
  animation: 60s linear 0s infinite notificationPopup;
}

@keyframes notificationPopup {
  0% {
    transform: translateY(0);
  }
  16.3% {
    transform: translateY(0);
  }
  16.6% {
    transform: translateY(-120%);
  }
  99.7% {
    transform: translateY(-120%);
  }
}

<div id="mybox">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, tempora esse laudantium officiis rerum! Quas enim, ratione, repellendus est natus doloribus rerum, maiores harum nisi modi cupiditate, a? Pariatur, quam.</div>
<section>
  <h1>Page title</h1>
  <p>section content</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci accusantium, sint veritatis nulla odit perspiciatis quos, distinctio maxime deleniti. Distinctio, aut officia, ad dolorum consequatur neque nemo! Quas, tempore sapiente.</p>
</section>

JS Fiddle demo.

参考文献：

jquery 定时 div 动画

jquery timed div animate

jquery

settimeout

setinterval