Question

我的网页有一个缓慢而引人注目的初始加载，其中标题分为3部分。我也有标签，当点击时，转移当前“页面”上的内容并转换到新的“页面”内容。因此，如果在初始标题转换完成之前单击选项卡，则它们会重叠并且事情变得混乱。我已经尝试过使用stop（）和finish（），但我不知道在哪里放它们。我想我要做的是指定单击选项卡时，初始动画在启动其他动画之前立即完成。但是我甚至不确定如何定位该动画。

初始标题动画：

$.fn.topSlide1 = function() {
  setTimeout ( function()
              {
    $('.part1').delay(1000).animate({ opacity: '1'  }, 'slow');
    setTimeout (function() {
      $('.part2').delay(1000).animate({  opacity: '1'}, 'slow');
      setTimeout(function() {
        $('.part3').delay(1000).animate({  opacity: '1'  }, 'slow');
      }, 1100);
    }, 1100);

  }, 1100);


  return this;

}

如果该初始页面仍在显示，则我点击标签的动画：

if (current == '#mag1')

{
  /*Stop animation code here??*/

  /*Starts the fading away transition*/
  $('.part1').animate({ opacity:'0'}, 'slow');
  $('.part2').animate({ opacity:'0'}, 'slow');
  $('.part3').animate({ opacity:'0'}, 'slow');
  $('.bio').fadeDown();

  /*Slides up new page*/
  $(id).fadeUp();
  current = id;

}

Answer 1

最后调用一个函数 - 就像这样

$('.part1').animate({
    opacity: 0
}, 'slow', function() {
    //todo if animation finished
    alert('end');
});

Answer 2

由于您已有点击处理程序，因此您应该可以在开始下一个动画之前调用.stop。 Stop接受一个参数跳转到动画的结尾，所以我会尝试这个：

if (current == '#mag1')

{
  /*                           clearQueue, jumpToEnd*/
  $('.part1, .part2, .part3').stop(true, true);

  /*Starts the fading away transition*/
  $('.part1').animate({ opacity:'0'}, 'slow');
  $('.part2').animate({ opacity:'0'}, 'slow');
  $('.part3').animate({ opacity:'0'}, 'slow');
  $('.bio').fadeDown();

  /*Slides up new page*/
  $(id).fadeUp();
  current = id;

}

jQuery.stop：https://api.jquery.com/stop/

JsFiddle示例：https://jsfiddle.net/rf1y60xz/1/

$(document).ready(function() {
// Fade in slow
    $('.move').animate({opacity: 1}, 5000);
  $('button').on('click', function() {
      $('.move').stop(true, true);
    // Fade out, do other things
    $('.move').animate({opacity: 0});
  })
});

稍微更人为的例子，等待不透明度动画完成，然后移动另一个框。

https://jsfiddle.net/rf1y60xz/2/

$(document).ready(function() {
// Fade in slow
    $('.move').animate({opacity: 1}, 5000);
  $('button').on('click', function() {
      $('.move').stop(true, true);
    // Fade out, do other things
    $('.move').animate({opacity: 0}, function () {
        $('.move2')
        .css('opacity', 1)
        .animate({left: 400});
    });
  })
});

如何在另一个启动之前定位和结束jquery事件？

2 个答案: