Я сражаюсь с jquery около часа, и я надеюсь, что кто-то может мне помочь здесь. Следующий пример ниже имеет плавные анимации. Когда вы нажимаете любой из разделов, выбранный div будет перемещаться влево или вправо, если область просмотра больше 700 пикселей, или вверх и вниз, когда она меньше 700 пикселей.jquery's animate вызывает divs, чтобы «прыгать», когда текст внутри.
Проблема заключается в том, что вы нажимаете на блок «КОД». Иногда, и кажется, что это происходит случайно, блок кода будет идти от 50% окна до 80%, а затем плавно переходит на 100%. Когда я удаляю h1 elements в html-файле, переход является плавным.
Я тестировал это локально с помощью firefox, safari, chrome, и все это кажется случайным.
Я тестировал это на jsfiddle с помощью firefox, safari и chrome, и кажется, что эта проблема уходит.
Может ли кто-нибудь определить, что может быть причиной этого? Почему я должен видеть эту ошибку локально, но не тогда, когда она находится на jsfiddle?
Обратите внимание! Блок кода javascript, который вызывает анимацию divs, представляет собой функцию _modifyDiv. Удалите и добавьте h1 elements в блок div, чтобы увидеть, есть ли разница на вашей стороне. Я понятия не имею, почему мои DIV блоков прыгать, когда я у себя эти файлы локально против через JS скрипкой ...
/*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>
Проблема работает лучше всего, когда вы запускаете фрагмент кода в разделе «Полная страница», –