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');
      }

 });

仅在完成slideUp后，Jquery slideDown

2 个答案: