0
我一直在與jquery打了一個小時左右，我希望有人能幫助我。下面的例子具有流暢的動畫。當你點擊其中一個div時，如果視口大於700px，選定的div將向左或向右移動，或者當它小於700px時向上或向下移動。jquery的動畫引起div跳到文本內
問題是當你點擊'代碼'塊。有時，隨機發生這種情況，代碼塊將從窗口的50％變爲80％，然後平滑過渡到100％。當我刪除html文件中的h1 elements時，轉換非常流暢。
我已經用firefox，safari，chrome在本地測試了這個，它看起來都是隨機的。
我已經在jsfiddle上用firefox，safari和chrome測試過了，看起來這個問題消失了。
任何人都可以發現可能造成這種情況嗎？爲什麼我會在本地看到這個錯誤，但是當它在jsfiddle上時呢？
請注意！導致div動畫的javascript代碼塊是功能_modifyDiv。請刪除並在div塊中添加h1 elements，以查看您身邊是否存在差異。我不知道爲什麼我的div塊時，我是主持人這些文件在本地通過VS爵士小提琴跳...
/*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>
在「完整頁面」中運行代碼段時，此問題效果最佳。 –