jQuery animiert macht einen div Sprung in Firefox

Question

Ich habe ein seltsames Problem, das nur Firefox betrifft. In meinem dev website, ich habe diesen jQuery-Code:

jQuery('body').on('click', '.sidebar-toggle', function(e){ 
    if (sidebarStatus == "OFF") { 
     jQuery('.panel-sidebar').animate({ 
     marginLeft: "0px" 
     }, 400); 
     jQuery('.products-listing-contents').animate({ 
     marginLeft: "200px", 
     width: '-=200px', 
     'padding-right' : 0 
     }, 400); 

setTimeout(function(){ 
    jQuery('.products-listing-contents').css("width","calc(100% - 200px)"); 
}, 420); 

     sidebarStatus = "ON"; 
    } 
    else { 
     jQuery('.panel-sidebar').animate({ 
     marginLeft: "-184px" 
     }, 400); 
     jQuery('.products-listing-contents').animate({ 
     marginLeft: "15px", 
     width: '100%', 
     'padding-right' : "15px" 
     }, 400); 
     sidebarStatus = "OFF"; 
    } 
    setCookie('sidebarStatus', sidebarStatus, 9999999); 
    }); 

Was es im Grunde eine linke Seitenleiste links und rechts nicht drückt, während die Inhaltsbreite eingestellt, die links von ihm erscheint. Es funktioniert gut in IE11 und Chrome, aber in FF springt der Inhaltsbereich nach unten und wieder hoch, wenn ich auf den Schieberegler klicke.

Ich habe versucht, die Zahlen anzupassen, aber das hilft nicht. Jede Hilfe würde sehr geschätzt werden. Vielen Dank.

Answer 1

Ich hatte Probleme mit setTimeout in FF vor. In Ihrem Fall versuchen Sie es zu vermeiden setTimeout und es könnte einfach funktionieren.

Sie müssen keine setTimeout aufrufen, um nach dem Ende der Animation etwas aufzurufen. Dafür gibt es einen eingebauten Callback. Nach der Zeitverzögerung können Sie eine Callback-Funktion mit einem Komma schreiben. Überprüfen Sie, ob das hilft. Auch wenn es nicht hilft, mit Ihrem Problem zu tun, wie unten angegeben ist definitiv besser als die Verwendung eines Async wie setTimeout.

So:

if (sidebarStatus == "OFF") { 
    jQuery('.panel-sidebar').animate({ 
    marginLeft: "0px" 
    }, 400); 
    jQuery('.products-listing-contents').animate({ 
    marginLeft: "200px", 
    width: '-=200px', 
    'padding-right' : 0 
    }, 400, function(){ 
     jQuery('.products-listing-contents').css("width","calc(100% - 200px)"); 
    }); 

    sidebarStatus = "ON"; 
} 

Answer 2

Verwenden CSS-Übergänge. Viel einfacher und sauberer als mit jQuery.

$("#sidebar-container").on("click", function() { 
 
    $(this).toggleClass('maximized-sidebar-container'); 
 
    $("#content-container").toggleClass('minimized-content-container'); 
 
});

#application-container { 
 
    position: absolute; 
 
    top: 0px; 
 
    right: 0px; 
 
    bottom: 0px; 
 
    left: 0px; 
 
    overflow: auto; 
 
} 
 
#sidebar-container { 
 
    position: absolute; 
 
    left: -160px; 
 
    width: 170px; 
 
    height:400px; 
 
    background-color: #0F0; 
 
    overflow: hidden; 
 
    transition: 350ms left ease-out; 
 
    z-index: 3; 
 
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3); 
 
} 
 
.maximized-sidebar-container { 
 
    left: 0px !important; 
 
} 
 
#content-container { 
 
    position: absolute; 
 
    right: 0px; 
 
    left: 10px; 
 
    height: 400px; 
 
    background-color: #808080; 
 
    border-width: 0px 0px 0px 1px; 
 
    border-style: solid; 
 
    border-color: #FFFFFF; 
 
    overflow-x: hidden; 
 
    overflow-y: auto; 
 
    transition: 350ms left ease-out; 
 
    z-index: 0; 
 
} 
 
.minimized-content-container { 
 
    left: 170px !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="application-container"> 
 
    <div id="sidebar-container"></div> 
 
    <div id="content-container">Content</div> 
 
</div>