Одновременное скольжение и исчезновение div

Привет, мои товарищи кодеры!

Я пытаюсь одновременно использовать слайд и исчезать в 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 });
    });
});

Спасибо.


jquery
person Anderson Madeira    schedule 18.02.2016    source источник
comment
это? stackoverflow.com/questions/7520366/   -  person Kristine    schedule 18.02.2016
comment
Я не хочу использовать наведение, чтобы сдвинуть div вверх, мой подход состоит в том, чтобы автоматически сдвигать его вверх с задержкой через 5 секунд, чтобы дать пользователю время прочитать сообщение.   -  person Anderson Madeira    schedule 18.02.2016
comment
Нравится это? или это?   -  person SpYk3HH    schedule 18.02.2016

Ответы (2)


arrow_upward
1
arrow_downward

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

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, которая может быть более подходящей для определенных случаев использования.

person SpYk3HH    schedule 18.02.2016
comment
Объяснение в вашем ответе довольно простое, и мне это нравится, но я хотел бы сделать это с помощью delay, это было бы более элегантно и менее подвержено ошибкам. Если вы измените свой ответ, чтобы использовать delay вместо setTimeout, я с радостью отмечу ваш ответ как правильный. - person Anderson Madeira; 18.02.2016
comment
@AndersonMadeira из API ~... .delay() is not a replacement for JavaScript's native setTimeout function, which may be more appropriate for certain use cases. К вашему сведению, но да, delay пример будет. - person SpYk3HH; 18.02.2016
comment
Хм, я понял. Спасибо за вашу заботу. - person Anderson Madeira; 18.02.2016

arrow_upward
1
arrow_downward

Вы можете сделать это только с помощью 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>
person Kristine    schedule 18.02.2016