Question

我一直在打jquery大约一个小时，我希望有人可以帮助我。以下示例具有平滑的动画。单击其中一个div时，如果视口大于700px，则所选div将向左或向右移动;如果视口小于700px，则向上和向下移动。

问题是当你点击“代码”时块。有时，感觉这种情况随机发生，代码块将从窗口的50％变为80％，然后平滑过渡到100％。当我删除html文件中的h1 elements时，转换是顺利的。

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

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

有人能发现可能造成这种情况的原因吗？为什么我会在本地看到这个bug，但是当它出现在jsfiddle上时呢？

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

＆＃13;

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

＆＃13;

@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; }

＆＃13;

<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>

＆＃13;

Answer 1

我找到了问题的根源。如果您的开发人员工具是开放的，那么它会导致这种奇怪的跳跃＆＃34;动画时。如果开发人员工具未打开，那么一切都按预期工作。

jquery的动画导致div跳过＆＃39;当文字在

1 个答案: