jqueryのアニメーションは、テキストが入っているときにdivにジャンプします。

Question

jqueryと約1時間戦っています。私はここで私を助けてくれることを願っています。次の例は、滑らかなアニメーションです。いずれかのdivをクリックすると、選択したdivは、ビューポートが700pxより大きい場合は左右に移動し、700pxより小さい場合は上下に移動します。

問題は、 'CODE'ブロックをクリックしたときです。場合によっては、ランダムに発生するように感じることがあります。コードブロックはウィンドウの50％から80％に移動し、100％にスムーズに移行します。 htmlファイルのh1 elementsを削除すると、スムーズに移行します。

これはローカルでfirefox、safari、chromeでテストしましたが、すべてランダムであるようです。

これをjsfiddleでfirefox、safari、およびchromeでテストしたところ、この問題は解決しないようです。

誰でもこれを引き起こしている可能性がありますスポットできますか？なぜこのバグがローカルで表示されますか？jsfiddleには表示されません。

ご注意ください！ divをアニメートさせるjavascriptコードブロックは、関数_modifyDivです。 divブロックにh1 elementsを削除して追加して、あなたの側に違いがあるかどうかを確認してください。私は、問題の原因を見つけ

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

...私はjsのフィドルによる対ローカルでこれらのファイルをホストするときに私のdivブロックがジャンプする理由はわかりません。あなたの開発者ツールが開いている場合、アニメーション中にこの奇妙な "ジャンプ"が発生します。デベロッパーツールが開いていないと、すべてが期待通りに機能します。