Ich habe jquery für etwa eine Stunde gekämpft, und ich hoffe, jemand kann mir hier helfen. Das folgende Beispiel unten zeigt fließende Animationen. Wenn Sie auf eines der divs klicken, wird das ausgewählte div nach links oder rechts verschoben, wenn das Ansichtsfenster größer als 700px ist, oder nach oben und unten, wenn es kleiner als 700px ist.jquery's animiert verursacht divs 'zu springen', wenn der Text darin ist
Das Problem ist, wenn Sie auf den Block "CODE" klicken. Manchmal, und es fühlt sich so an, als würde dies zufällig passieren, wird der Codeblock von 50% des Fensters auf 80% und dann glatt auf 100% übergehen. Wenn ich die h1 elements in der HTML-Datei entferne, ist der Übergang reibungslos.
Ich habe dies lokal mit Firefox, Safari, Chrom getestet, und es scheint alles zufällig zu sein.
Ich habe dies auf jsfiddle mit Firefox, Safari und Chrom getestet und es scheint, dass dieses Problem verschwindet.
Kann jemand feststellen, was das verursacht? Warum sollte ich diesen Fehler lokal sehen, aber nicht, wenn es auf jsfiddle ist?
Bitte beachten! Der Javascript-Codeblock, der bewirkt, dass die divs animiert werden, ist die Funktion _modifyDiv. Bitte entferne und füge den h1 elements im Div-Block hinzu, um zu sehen, ob es einen Unterschied auf deiner Seite gibt. Ich habe keine Ahnung, warum meine div Blöcke springen, wenn ich diese Dateien Host lokal vs durch js Geige ...
/*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>
Das Problem funktioniert am besten, wenn Sie das Code-Snippet in "Full Page" ausführen –