Question

你好我的同事们！

我试图在jquery中同时使用幻灯片和淡入淡出来创建一个＆＃34; msg框＆＃34;向上和向下滑动，但我没有设法等待（delay）所以用户实际上可以看到msg框中的文本。我试图在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 });
    });
});

感谢。

Answer 1

你可以用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>

Answer 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函数，这可能更适合某些用例。

同时滑动和淡化div

2 个答案: