当文本在里面时，jquery animate 导致 div '跳转'

Question

我已经与 jquery 战斗了大约一个小时，我希望有人可以在这里帮助我。下面的示例具有流畅的动画。当你点击其中一个 div 时，如果 viewport 大于 700px，所选 div 将向左或向右移动，如果小于 700px，则向上和向下移动。

问题是当您单击“CODE”块时。有时，感觉就像随机发生的那样，代码块会从窗口的 50% 变为 80%，然后平滑过渡到 100%。当我删除 html 文件中的h1 elements 时，过渡很顺利。

我已经在本地使用 Firefox、safari、chrome 对此进行了测试，这一切似乎都是随机的。

我已经在 jsfiddle 上使用 firefox、safari 和 chrome 对此进行了测试，看来这个问题已经消失了。

谁能发现可能导致这种情况的原因？为什么我会在本地看到这个错误，但在 jsfiddle 上却没有？

请注意！导致 div 动画的 javascript 代码块是函数_modifyDiv。请在 div 块中删除并添加 h1 elements 以查看您这边是否有差异。我不知道为什么当我在本地托管这些文件而不是通过 js fiddle 托管这些文件时，我的 div 块会跳转......

/*jshint esversion: 6 */

var Welcome = (function () {
  var isSideBarActive = false;

  //So I don't have to write document.getElementById everytime.
  var id = function(element) {
    return document.getElementById(element);
  };

  //add multiple types of events to an element
  var addMultipleEvents = function(eventsArray, element, fn){
    eventsArray.forEach(function(e){
      id(element).addEventListener(e, fn, false);
    });
  }
  //which mode should we navigate to? This function creates a sidebar from the element
  var selectDiv = function(element){
    var selectedDiv;
    var notSelectedDiv;
    switch(element){
      case 'photography':
      selectedDiv = 'photography';
      notSelectedDiv = 'code';
      break;
      case 'code':
      selectedDiv = 'code';
      notSelectedDiv = 'photography';
      break;
    }

    return _modifyDiv(selectedDiv, notSelectedDiv);
  };

  var _modifyDiv = function (expand, contract){
    var $expand = $('#' + expand);
    var $contract = $('#' + contract);
    // id('aligner').style.justifyContent = 'space-between';

    if (!window.matchMedia('(max-width: 700px)').matches) {//is screen larger than 700px wide?
      $expand.animate({
        width: '100vw',
      },900);
      $contract.animate({
        width: '0vw',
        display: 'none'
      },900).delay(100).find('h1').css('display', 'none');
    } else { //screen is less than 700px wide
      $expand.animate({
        height: '100vh',
      },900);
      $contract.animate({
        height: '0vh',
        display: 'none'
      },900)
    }
  }

  return {//public methods
    selectDiv: selectDiv,
    addMultipleEvents: addMultipleEvents
    // modifyDiv: modifyDiv,
  };
})();


$(document).ready(function(){
  var myEvents = ['click', 'touchend'];
  Welcome.addMultipleEvents(myEvents, 'code', function(){Welcome.selectDiv('code')});
  Welcome.addMultipleEvents(myEvents, 'photography', function(){Welcome.selectDiv('photography')});

});

@import "https://fonts.googleapis.com/css?family=Raleway:400,500";
#aligner {
  list-style: none;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  width: 100%; }
  #aligner .align-spacer {
    width: 20px; }
  #aligner .align-item {
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(rgba(0, 163, 136, 0.45), rgba(0, 163, 136, 0.45)), url("http://placekitten.com/600/500");
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    text-align: center;
    height: 100vh; }
  #aligner .align-item:nth-child(1) {
    background: linear-gradient(rgba(255, 0, 0, 0.45), rgba(255, 0, 0, 0.45)), url("http://placekitten.com/200/300");
    width: 100; }

@media (max-width: 700px) {
  #aligner {
    flex-direction: column; }
    #aligner .align-spacer {
      width: 20px; }
    #aligner .align-item {
      height: 50vh; } }
h1, h2, h3, h4, h5, h6 {
  font-family: 'Raleway' !important; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="aligner">
  <div id = 'code' class = "align-item">
   <h1>Code</h1>
  </div>
  <div id = 'photography' class = "align-item">
   <h1>Photography</h1>
  </div>
</div>

Answer 1

我找到了问题的根源。如果您的开发人员工具是打开的，那么它会在制作动画时导致这种奇怪的“跳跃”。如果开发人员工具没有打开，那么一切都按预期工作。