jQuery 中的默认 .toggle() 缓动动画不起作用答案

【问题标题】：Default .toggle() easing animation in jQuery not workingjQuery 中的默认 .toggle() 缓动动画不起作用
【发布时间】：2016-03-23 12:24:32
【问题描述】：

我正在尝试使用 toggle() jquery 函数来隐藏侧边栏。

代码：

$('#hide_saved_templates').click(function(){
        $('#saved_templates').toggle('slow');
        var jobWrapper = $('#job_form_wrapper');

        if(jobWrapper.hasClass('col-md-7'))
        {
            jobWrapper.removeClass('col-md-7');
            $('#hide_saved_templates').removeClass('glyphicon-backward');
            $('#hide_saved_templates').addClass('glyphicon-forward');
            jobWrapper.addClass('col-md-9');
        }
        else if(jobWrapper.hasClass('col-md-10'))
        {
            jobWrapper.removeClass('col-md-10');
            $('#hide_saved_templates').removeClass('glyphicon-backward');
            $('#hide_saved_templates').addClass('glyphicon-forward');
            jobWrapper.addClass('col-md-12');
        }
        else if(jobWrapper.hasClass('col-md-12')){
            jobWrapper.removeClass('col-md-12');
            $('#hide_saved_templates').removeClass('glyphicon-forward');
            $('#hide_saved_templates').addClass('glyphicon-backward');
            jobWrapper.addClass('col-md-10');
        }
        else {
            jobWrapper.removeClass('col-md-9');
            $('#hide_saved_templates').removeClass('glyphicon-forward');
            $('#hide_saved_templates').addClass('glyphicon-backward');
            jobWrapper.addClass('col-md-7');
        }
   });

   $('#hide_job_history').click(function(){
        $('#jobs_history').toggle('slow');
        var jobWrapper = $('#job_form_wrapper');

        if(jobWrapper.hasClass('col-md-7'))
        {
            jobWrapper.removeClass('col-md-7');
            $('#hide_job_history').removeClass('glyphicon-forward');
            $('#hide_job_history').addClass('glyphicon-backward');
            jobWrapper.addClass('col-md-10');
        }
        else if(jobWrapper.hasClass('col-md-10'))
        {
            jobWrapper.removeClass('col-md-10');
            $('#hide_job_history').removeClass('glyphicon-backward');
            $('#hide_job_history').addClass('glyphicon-forward');
            jobWrapper.addClass('col-md-7');
        }
        else if(jobWrapper.hasClass('col-md-9')){
            jobWrapper.removeClass('col-md-9');
            $('#hide_job_history').removeClass('glyphicon-forward');
            $('#hide_job_history').addClass('glyphicon-backward');
            jobWrapper.addClass('col-md-12');
        }
        else if(jobWrapper.hasClass('col-md-12')){
            jobWrapper.removeClass('col-md-12');
            $('#hide_job_history').removeClass('glyphicon-backward');
            $('#hide_job_history').addClass('glyphicon-forward');
            jobWrapper.addClass('col-md-9');
        }

   });

切换功能正常，可以按预期切换侧边栏。但是， toggle('slow') 的默认缓动动画在一个侧边栏 $('#saved_templates').toggle('slow') 上运行良好，而在另一个侧边栏 $('#jobs_history').toggle('slow'); 上运行良好。我为两个侧边栏使用了相同的代码，但我无法理解这种不一致的原因。我想将平滑简单的过渡应用于切换效果。

HTML 结构：

<div class="row">
  <div class="col-md-2 no-padding show-templates-outer-wrapper" id="saved_templates" style="display: none;"></div>
  <div class="no-padding col-md-12" id="job_form_wrapper">
      <span id="hide_saved_templates" class="glyphicon glyphicon-forward" style="cursor: pointer;"></span>
      <span id="hide_job_history" style="position: absolute; right: 5px; cursor: pointer;" class="glyphicon glyphicon-forward"></span>
</div>

<div class="col-md-3 no-padding show-jobs-history-outer-wrapper" id="jobs_history" style="display: none;"></div>
</div>

【问题讨论】：

你能为此做一个 jsfiddle 吗？
显示任何错误？你能发布部分 HTML 代码吗？
@JanRydrych 我已经添加了 HTML 结构
@NuttyProgrammer 你的代码中$('#show-jobs-history-outer-wrapper').toggle('slow'); 这一行在哪里？
@JohnR 对不起，打错了。它的$('#jobs_history').toggle('slow');

标签： javascript jquery html css

【解决方案1】：

问题是toggle 并且更改课程同时发生。由于jobs_history div 位于最后一个位置，因此toggle 事件不会影响其他人。以下代码 sn -p 可能会对您有所帮助。

var saved_templates = $('#saved_templates');
var jobs_history = $('#jobs_history');

$('#hide_saved_templates').click(function() {
  if (saved_templates.is(':visible')) {
    saved_templates.hide('slow', function() {
      jobs_history.show();
    });
  } else {
    jobs_history.hide();
    saved_templates.show('slow');
  }

  $(this).toggleClass('glyphicon-backward glyphicon-forward');
});

$('#hide_job_history').click(function() {
  if (jobs_history.is(':visible')) {
    jobs_history.hide();
    saved_templates.show('slow');
  } else {
    saved_templates.hide('slow', function() {
      jobs_history.show();
    });
  }

  $(this).toggleClass('glyphicon-backward glyphicon-forward');
});

#saved_templates, #jobs_history, #job_form_wrapper {
    border: 1px solid #000;
    height: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-md-2 no-padding show-templates-outer-wrapper" id="saved_templates" style="display: none;"></div>
  <div class="no-padding col-md-10" id="job_form_wrapper">
    <span id="hide_saved_templates" class="glyphicon glyphicon-forward" style="cursor: pointer;"></span>
    <span id="hide_job_history" style="position: absolute; right: 5px; cursor: pointer;" class="glyphicon glyphicon-forward"></span>
  </div>
  <div class="col-md-2 no-padding show-jobs-history-outer-wrapper" id="jobs_history" style="display: none;"></div>
</div>

查看整页结果。

【讨论】：