jquery slideDown仅在slideUp完成后

Question

我对 jQuery 很陌生，我一直在努力解决这个问题，但找不到答案。我想要实现的是在单击选项卡时向下滑动内容（有效），但是在单击另一个选项卡后我想向上滑动可见内容，并且只有在动画完成后才能向下滑动新内容。 我尝试将 slideDown 设置为 slideUp 的回调，但我一定做错了什么，因为那时动画根本不起作用。

这是我的代码：

$('#tabs').on('click', 'a', function(e) {        
      e.preventDefault();
      if (!$(this).hasClass('active')) {

        $('#tabs').find('.active').removeClass('active');
        $(this).addClass('active');
        $('.course-level:visible').slideUp();
        $('.course-level[id=' + $(this).attr('data-id') + ']').slideDown();

      } else {
        $('.course-level:visible').slideUp();
        $(this).removeClass('active');
      }
 });

这是我所能得到的东西：http://jsfiddle.net/asiek/2UvWX/6/

提前感谢您的帮助！

Answer 1

这不是迄今为止最简洁的代码，但它演示了回调的使用。该函数在 slideUp 事件完成后触发。不要使用延迟。

http://jsfiddle.net/2UvWX/13/

$('#tabs').on('click', 'a', function(e) {
    var _this = $(this);
    e.preventDefault();

    if( $(_this).hasClass('active') )
    {
        $(_this).removeClass('active');
        $('.course-level:visible').slideUp();
    }
    else
    {
        if( $('.course-level:visible').length > 0 )
        {
            $('#tabs a.active').removeClass('active');

            $('.course-level:visible').slideUp(function() {
                $('.course-level[id=' + $(_this).attr('data-id') + ']').slideDown();
            });
        }
        else
        {
            $('.course-level[id=' + $(_this).attr('data-id') + ']').slideDown();
        }
    }
});

Answer 2

我设置了延迟http://jsfiddle.net/2UvWX/12/

    $('#tabs').on('click', 'a', function(e) {

      e.preventDefault();
      if (!$(this).hasClass('active')) {

        $('#tabs').find('.active').removeClass('active');
        $(this).addClass('active');
        $('.course-level:visible').slideUp(300);
        $('.course-level[id=' + $(this).attr('data-id') + ']').delay(300).slideDown();

      } else {
        $('.course-level:visible').slideUp();
        $(this).removeClass('active');
      }

 });