Привет, товарищи-программисты!

Я пытаюсь использовать слайд и исчезновение одновременно в jquery, чтобы "окно сообщения" скользило вверх и вниз, но мне не удалось заставить его ждать (с delay), чтобы пользователь действительно мог видеть текст в поле сообщения. Я попытался передать вызов delay перед stop, но это не сработало. Есть идеи, как это можно сделать?

$('#msg_callout').stop(true, true)
                 .fadeIn({ duration: 'slow', queue: false })
                 .css('display', 'none').slideDown('slow', function () {

    $('#msg_callout').stop(true, true).delay(7000, function() {
        $(this).slideUp('slow').fadeOut({ duration: 'slow', queue: false });
    });
});

Спасибо.

-1
Anderson Madeira 18 Фев 2016 в 16:13

2 ответа

Лучший ответ

Непонятно, о чем вы спрашиваете, но в большинстве случаев, если вам нужны одновременные анимации, просто вызывайте их по порядку, а не в цепочку.

jsFiddle, сокращенная до 3-х секундной задержки, чтобы просто увидеть, как это работает.

$('button').on('click', function(e) {
  // clear simple timer for running later code. Clearing this ensures it starts from begining
  if (this.tmr) clearTimeout(this.tmr);
  // stop any previous running animation and reset elements
  $('div, pre').stop(true, true).hide()
  // run first two animations, note one for parent and one for child
  // also note, the parent has set width, this helps with hidden child
  $('div').slideDown('slow')
  $('pre').fadeIn('slow');
  // that simple timer i mentioned, for delaying next animation
  this.tmr = setTimeout(function() {
    // our last 2 animations
    $('pre').fadeOut('slow');
    $('div').slideUp('slow');
  }, 5000);
})

Использование delay()

jsFiddle

$('button').on('click', function(e) {
  $('div, pre').stop(true, true).hide();
  // delay works best on one element at a time
  $('div').slideDown('slow').delay(5000).slideUp('slow');
  // so simply call it on each element, but make sure the times remain hwo you want them or it cold begin to look silly
  $('pre').fadeIn('slow').delay(5000).fadeOut('slow');
})

Проблема с этим решением в том, что оно не останавливает задержку, и если ваш метод запускается несколько раз, он будет выглядеть странно.
Чтобы понять, что я имею в виду, откройте обе эти скрипки. На каждом из них нажмите кнопку примерно 5 или 6 раз. Или щелкните, чтобы позволить ему полностью открыться, затем щелкните еще раз. Обратите внимание на то, что мое первое решение работает каждый раз одинаково, но второе начнет исчезать и скользить вверх намного быстрее.

Из https://api.jquery.com/delay/

Метод .delay () лучше всего подходит для задержки между эффектами jQuery в очереди. Поскольку он ограничен - например, не предлагает способа отменить задержку - .delay () не является заменой встроенной функции JavaScript setTimeout, которая может быть более подходящей для определенных случаев использования.

1
meagar 12 Июн 2016 в 00:00

Вы можете сделать это с помощью CSS: http://jsfiddle.net/es_kaija/jhj4u699/

/* The animation code */


@keyframes example {
    0%   { height: 0; opacity: 0; }
    25%  { height: 100px; opacity: 1; }
    50%  { height: 100px; opacity: 1; }
    75%  { height: 100px; opacity: 1; }
    100% { height: 0; opacity: 0; }
}

/* The element to apply the animation to */
#myDiv {
  height: 0;
  opacity: 0;
  position: absolute;
  top: 0px;
  left: 0px;
  background: red;
  width: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 7s;
  animation-fill-mode: forwards;
}

<div id="myDiv">
</div>
1
Kristine 18 Фев 2016 в 13:58