JQuery приурочен div живой - PullRequest
Новая
       9

JQuery приурочен div живой

0 голосов
/ 20 октября 2018

У меня есть следующие 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

Ответы [ 3 ]

0 голосов
/ 21 октября 2018

Другой возможный способ - поиграть с 2 setTimeout time: 60 секунд и 10 секунд (время скрытия и показа), делегировать переход показа в CSS.

Это код (в этой демонстрации я изменил время за 10 с.для waitTime и 4 секунд для showtime, так что вам не нужно ждать слишком долго, чтобы увидеть, как работает код, но вы можете изменить это время по своему усмотрению): 

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>
0 голосов
/ 21 октября 2018

Я бы посоветовал вместо использования 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 .

Ссылки:

0 голосов
/ 21 октября 2018

Я думаю, что это то, что вы ожидаете. 

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