jQuery animate() and css() not performing well in firefox and internet explorer
Clash Royale CLAN TAG#URR8PPP
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty margin-bottom:0;
up vote
1
down vote
favorite
I am making a webapp that needs a division to expand on click. (The division is loaded with content, so it was likely to not animate very well, but I increased the animation time to 1s to make it look smooth) I assigned an event on it and it works absolutely fine in chrome, without hitch or flicker, but in firefox and internet explorer, these issues are there. Here is my JS function to implement this:
$activeId = '';
$hider = function($ID)
if ($activeId.length)
$shower($activeId)
;
$activeId = $ID;
$('#' + $ID).css('opacity', '0');
$('#' + $ID).css('visibility', 'hidden');
$('#' + $ID + '-main-div').animate(
height: '900px'
, 1000);
$('#' + $ID + "-btn").css('visibility', 'visible');
$('#' + $ID + "-floating-closer").addClass('animate')
;
$shower = function($ID)
$('#' + $ID).css('opacity', '1');
$('#' + $ID).css('visibility', 'visible');
$('#' + $ID + '-main-div').animate(
height: '260px'
, 800);
$('#' + $ID + "-btn").css('visibility', 'hidden');
$('#' + $ID + "-floating-closer").removeClass('animate');
$activeId = ''
;
The division that expands has these CSS properties:
.row-container
height: 260px;
After performing manual removal of elements, I have noticed that the animation affecting the overall performance is this:
$('#' + $ID + '-main-div').animate(
height: '900px'
, 1000);
Kindly note that the code works absolutely fine on Chrome, it also works on Firefox and IE as well, but with very low performance. Is there a better practice to make to the animation smoother on Firefox and IE as well?
Update: The code snippet has been posted. Kindly go through it please. Also, notice that adding the animation square-animation to the .row-container in CSS makes the animation smooth in Firefox. I read that it forces hardware acceleration for animating CSS. The performance issue persists in IE.
$activeId = '';
$hider = function($ID)
if ($activeId.length)
$shower($activeId)
;
$activeId = $ID;
$('#' + $ID).css('opacity', '0');
$('#' + $ID).css('visibility', 'hidden');
$('#' + $ID + '-main-div').animate(
height: '850px'
, 1000);
$('#' + $ID + "-btn").css('visibility', 'visible');
$('#' + $ID + "-floating-closer").addClass('animate')
;
$shower = function($ID)
$('#' + $ID).css('opacity', '1');
$('#' + $ID).css('visibility', 'visible');
$('#' + $ID + '-main-div').animate(
height: '260px'
, 800);
$('#' + $ID + "-btn").css('visibility', 'hidden');
$('#' + $ID + "-floating-closer").removeClass('animate');
$activeId = ''
;ul
margin: 0;
padding: 0;
.row-container
height: 260px;
/* animation: square-animation 5s infinite; */
@keyframes square-animation
0%, 100%
transform: rotate(0.01deg);
-ms-transform: rotate(0.01deg);
-webkit-transform: rotate(0.01deg);
-moz-transform: rotate(0.01deg);
-o-transform: rotate(0.01deg);
50%
transform: rotate(0.01deg);
-ms-transform: rotate(0.01deg);
-webkit-transform: rotate(0.01deg);
-moz-transform: rotate(0.01deg);
-o-transform: rotate(0.01deg);
.cat-child
position: absolute;
width: 100%;
top: 0;
left: 0;
z-index: 100;
background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.75), rgba(0,0,0,0.9));
vertical-align: middle;
visibility: visible;
transition: all 1s;
.cat-button
position: absolute;
z-index: 90;
width: 100%;
height: 50px;
bottom: 0;
.floating-closer
position: absolute;
z-index: 90;
border-radius: 50%;
background: #FFF;
color: black;
font-size: 1rem;
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
height: 56px;
width: 56px;
right: 15px;
top: 15px;
transform: scale(0);
transition: all 0.4s;
.floating-closer.animate
transform: scale(1);
.sub-cat-tags
height: 100%;
vertical-align: middle;
padding-left: 7.5px;
padding-right: 7.5px;
margin-left: 5px;
border-radius: 5px;
background: #00F;;
font-size: 15px;
.navbar-toggler
position: absolute;
right: 8px;
top: 8px;
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8;">
<meta name="author" content="Test">
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0">
<title>
Test | Home
</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script async src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script>
$("window").ready(function ()
$('li.active').removeClass('active');
$('.home').addClass('active');
);
</script>
</head>
<body>
<header class="sticky-top">
<nav class="navbar navbar-expand-lg navbar-toggleable-md navbar-dark bg-dark">
<div class="navbar-collapse collapse w-100 order-1 order-lg-0 dual-collapse2">
<ul class="navbar-nav mr-auto">
<li class="nav-item home">
<a class="nav-link" href="/">Home</a>
</li>
</ul>
</div>
<div class="mx-auto order-0">
<a class="navbar-brand d-flex mx-auto" href="/">Test</a>
</div>
<div class="navbar-collapse collapse w-100 order-lg-3 order-3 dual-collapse2">
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
</header>
<div class="container-fluid text-white">
<div class="row row-container" id="Test-main-div">
<div class="col-12 h-100" style="overflow: hidden;">
<button class="btn floating-closer" id="Test-floating-closer" onclick="$shower('Test')">
<span>X</span>
</button>
<div class="row cat-child h-100 align-items-center m-0" id="Test" onclick="$hider('Test')">
<div class="text-center col">
<h1 class="display-1">Test</h1>
</div>
</div>
<h1 class="text-dark font-weight-bold">Divisions (content heavy) that are sitting behind.</h1>
<div class="row cat-button">
<div class="col-12">
<a href="/test">
<button id="test-btn" class="btn font-weight-bold btn-light m-0 h-100 w-100" style="visibility: hidden;">
<h5>Test</h5>
</button>
</a>
</div>
</div>
</div>
</div>
<div class="row row-container" id="Test2-main-div">
<div class="col-12 h-100" style="overflow: hidden;">
<button class="btn floating-closer" id="Test2-floating-closer" onclick="$shower('Test2')">
<img src="/img/cross.svg" height="22px" width="22px" />
</button>
<div class="row cat-child h-100 align-items-center m-0" id="Test2" onclick="$hider('Test2')">
<div class="text-center col">
<h1 class="display-1">Test2</h1>
</div>
</div>
<h1 class="text-dark font-weight-bold">Divisions (content heavy) that are sitting behind.</h1>
<div class="row cat-button">
<div class="col-12">
<a href="/test2">
<button id="test2-btn" class="btn font-weight-bold btn-light m-0 h-100 w-100" style="visibility: hidden;">
<h5>Test2</h5>
</button>
</a>
</div>
</div>
</div>
</div>
</div>
</body>
<script>$(function () $(document).click(function (event) $('.navbar-collapse').collapse('hide'); ); );</script>
</html>javascript performance jquery css animation
asked Apr 4 at 19:59
metamemelord
113
 |Â
show 8 more comments
up vote
1
down vote
favorite
I am making a webapp that needs a division to expand on click. (The division is loaded with content, so it was likely to not animate very well, but I increased the animation time to 1s to make it look smooth) I assigned an event on it and it works absolutely fine in chrome, without hitch or flicker, but in firefox and internet explorer, these issues are there. Here is my JS function to implement this:
$activeId = '';
$hider = function($ID)
if ($activeId.length)
$shower($activeId)
;
$activeId = $ID;
$('#' + $ID).css('opacity', '0');
$('#' + $ID).css('visibility', 'hidden');
$('#' + $ID + '-main-div').animate(
height: '900px'
, 1000);
$('#' + $ID + "-btn").css('visibility', 'visible');
$('#' + $ID + "-floating-closer").addClass('animate')
;
$shower = function($ID)
$('#' + $ID).css('opacity', '1');
$('#' + $ID).css('visibility', 'visible');
$('#' + $ID + '-main-div').animate(
height: '260px'
, 800);
$('#' + $ID + "-btn").css('visibility', 'hidden');
$('#' + $ID + "-floating-closer").removeClass('animate');
$activeId = ''
;
The division that expands has these CSS properties:
.row-container
height: 260px;
After performing manual removal of elements, I have noticed that the animation affecting the overall performance is this:
$('#' + $ID + '-main-div').animate(
height: '900px'
, 1000);
Kindly note that the code works absolutely fine on Chrome, it also works on Firefox and IE as well, but with very low performance. Is there a better practice to make to the animation smoother on Firefox and IE as well?
Update: The code snippet has been posted. Kindly go through it please. Also, notice that adding the animation square-animation to the .row-container in CSS makes the animation smooth in Firefox. I read that it forces hardware acceleration for animating CSS. The performance issue persists in IE.
$activeId = '';
$hider = function($ID)
if ($activeId.length)
$shower($activeId)
;
$activeId = $ID;
$('#' + $ID).css('opacity', '0');
$('#' + $ID).css('visibility', 'hidden');
$('#' + $ID + '-main-div').animate(
height: '850px'
, 1000);
$('#' + $ID + "-btn").css('visibility', 'visible');
$('#' + $ID + "-floating-closer").addClass('animate')
;
$shower = function($ID)
$('#' + $ID).css('opacity', '1');
$('#' + $ID).css('visibility', 'visible');
$('#' + $ID + '-main-div').animate(
height: '260px'
, 800);
$('#' + $ID + "-btn").css('visibility', 'hidden');
$('#' + $ID + "-floating-closer").removeClass('animate');
$activeId = ''
;ul
margin: 0;
padding: 0;
.row-container
height: 260px;
/* animation: square-animation 5s infinite; */
@keyframes square-animation
0%, 100%
transform: rotate(0.01deg);
-ms-transform: rotate(0.01deg);
-webkit-transform: rotate(0.01deg);
-moz-transform: rotate(0.01deg);
-o-transform: rotate(0.01deg);
50%
transform: rotate(0.01deg);
-ms-transform: rotate(0.01deg);
-webkit-transform: rotate(0.01deg);
-moz-transform: rotate(0.01deg);
-o-transform: rotate(0.01deg);
.cat-child
position: absolute;
width: 100%;
top: 0;
left: 0;
z-index: 100;
background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.75), rgba(0,0,0,0.9));
vertical-align: middle;
visibility: visible;
transition: all 1s;
.cat-button
position: absolute;
z-index: 90;
width: 100%;
height: 50px;
bottom: 0;
.floating-closer
position: absolute;
z-index: 90;
border-radius: 50%;
background: #FFF;
color: black;
font-size: 1rem;
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
height: 56px;
width: 56px;
right: 15px;
top: 15px;
transform: scale(0);
transition: all 0.4s;
.floating-closer.animate
transform: scale(1);
.sub-cat-tags
height: 100%;
vertical-align: middle;
padding-left: 7.5px;
padding-right: 7.5px;
margin-left: 5px;
border-radius: 5px;
background: #00F;;
font-size: 15px;
.navbar-toggler
position: absolute;
right: 8px;
top: 8px;
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8;">
<meta name="author" content="Test">
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0">
<title>
Test | Home
</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script async src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script>
$("window").ready(function ()
$('li.active').removeClass('active');
$('.home').addClass('active');
);
</script>
</head>
<body>
<header class="sticky-top">
<nav class="navbar navbar-expand-lg navbar-toggleable-md navbar-dark bg-dark">
<div class="navbar-collapse collapse w-100 order-1 order-lg-0 dual-collapse2">
<ul class="navbar-nav mr-auto">
<li class="nav-item home">
<a class="nav-link" href="/">Home</a>
</li>
</ul>
</div>
<div class="mx-auto order-0">
<a class="navbar-brand d-flex mx-auto" href="/">Test</a>
</div>
<div class="navbar-collapse collapse w-100 order-lg-3 order-3 dual-collapse2">
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
</header>
<div class="container-fluid text-white">
<div class="row row-container" id="Test-main-div">
<div class="col-12 h-100" style="overflow: hidden;">
<button class="btn floating-closer" id="Test-floating-closer" onclick="$shower('Test')">
<span>X</span>
</button>
<div class="row cat-child h-100 align-items-center m-0" id="Test" onclick="$hider('Test')">
<div class="text-center col">
<h1 class="display-1">Test</h1>
</div>
</div>
<h1 class="text-dark font-weight-bold">Divisions (content heavy) that are sitting behind.</h1>
<div class="row cat-button">
<div class="col-12">
<a href="/test">
<button id="test-btn" class="btn font-weight-bold btn-light m-0 h-100 w-100" style="visibility: hidden;">
<h5>Test</h5>
</button>
</a>
</div>
</div>
</div>
</div>
<div class="row row-container" id="Test2-main-div">
<div class="col-12 h-100" style="overflow: hidden;">
<button class="btn floating-closer" id="Test2-floating-closer" onclick="$shower('Test2')">
<img src="/img/cross.svg" height="22px" width="22px" />
</button>
<div class="row cat-child h-100 align-items-center m-0" id="Test2" onclick="$hider('Test2')">
<div class="text-center col">
<h1 class="display-1">Test2</h1>
</div>
</div>
<h1 class="text-dark font-weight-bold">Divisions (content heavy) that are sitting behind.</h1>
<div class="row cat-button">
<div class="col-12">
<a href="/test2">
<button id="test2-btn" class="btn font-weight-bold btn-light m-0 h-100 w-100" style="visibility: hidden;">
<h5>Test2</h5>
</button>
</a>
</div>
</div>
</div>
</div>
</div>
</body>
<script>$(function () $(document).click(function (event) $('.navbar-collapse').collapse('hide'); ); );</script>
</html>javascript performance jquery css animation
asked Apr 4 at 19:59
metamemelord
113
You need to ask this question at stackOverflow stackoverflow.com. This is code review and we don't fix code problems.
– Blindman67
Apr 4 at 20:09
Hi @Blindman67 As I mentioned, the webapp performs flawlessly on Chrome. It also implements the functionality in firefox, but the performance of animation is ridiculous. That is why I posted it here; to get suggestions on how to boost the performance.
– metamemelord
Apr 4 at 20:13
1
I suggest that you make a live demo by pressing Ctrl-M in the question editor.
– 200_success
Apr 4 at 20:38
1
For the close-voters: It appears to be a performance issue, not actual broken code, so voting to not close
– Dannnno
Apr 4 at 23:33
@200_success The live demo has been updated. Thanks for help! :)
– metamemelord
Apr 5 at 7:31
 |Â
show 8 more comments
up vote
1
down vote
favorite
up vote
1
down vote
favorite
I am making a webapp that needs a division to expand on click. (The division is loaded with content, so it was likely to not animate very well, but I increased the animation time to 1s to make it look smooth) I assigned an event on it and it works absolutely fine in chrome, without hitch or flicker, but in firefox and internet explorer, these issues are there. Here is my JS function to implement this:
$activeId = '';
$hider = function($ID)
if ($activeId.length)
$shower($activeId)
;
$activeId = $ID;
$('#' + $ID).css('opacity', '0');
$('#' + $ID).css('visibility', 'hidden');
$('#' + $ID + '-main-div').animate(
height: '900px'
, 1000);
$('#' + $ID + "-btn").css('visibility', 'visible');
$('#' + $ID + "-floating-closer").addClass('animate')
;
$shower = function($ID)
$('#' + $ID).css('opacity', '1');
$('#' + $ID).css('visibility', 'visible');
$('#' + $ID + '-main-div').animate(
height: '260px'
, 800);
$('#' + $ID + "-btn").css('visibility', 'hidden');
$('#' + $ID + "-floating-closer").removeClass('animate');
$activeId = ''
;
The division that expands has these CSS properties:
.row-container
height: 260px;
After performing manual removal of elements, I have noticed that the animation affecting the overall performance is this:
$('#' + $ID + '-main-div').animate(
height: '900px'
, 1000);
Kindly note that the code works absolutely fine on Chrome, it also works on Firefox and IE as well, but with very low performance. Is there a better practice to make to the animation smoother on Firefox and IE as well?
Update: The code snippet has been posted. Kindly go through it please. Also, notice that adding the animation square-animation to the .row-container in CSS makes the animation smooth in Firefox. I read that it forces hardware acceleration for animating CSS. The performance issue persists in IE.
$activeId = '';
$hider = function($ID)
if ($activeId.length)
$shower($activeId)
;
$activeId = $ID;
$('#' + $ID).css('opacity', '0');
$('#' + $ID).css('visibility', 'hidden');
$('#' + $ID + '-main-div').animate(
height: '850px'
, 1000);
$('#' + $ID + "-btn").css('visibility', 'visible');
$('#' + $ID + "-floating-closer").addClass('animate')
;
$shower = function($ID)
$('#' + $ID).css('opacity', '1');
$('#' + $ID).css('visibility', 'visible');
$('#' + $ID + '-main-div').animate(
height: '260px'
, 800);
$('#' + $ID + "-btn").css('visibility', 'hidden');
$('#' + $ID + "-floating-closer").removeClass('animate');
$activeId = ''
;ul
margin: 0;
padding: 0;
.row-container
height: 260px;
/* animation: square-animation 5s infinite; */
@keyframes square-animation
0%, 100%
transform: rotate(0.01deg);
-ms-transform: rotate(0.01deg);
-webkit-transform: rotate(0.01deg);
-moz-transform: rotate(0.01deg);
-o-transform: rotate(0.01deg);
50%
transform: rotate(0.01deg);
-ms-transform: rotate(0.01deg);
-webkit-transform: rotate(0.01deg);
-moz-transform: rotate(0.01deg);
-o-transform: rotate(0.01deg);
.cat-child
position: absolute;
width: 100%;
top: 0;
left: 0;
z-index: 100;
background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.75), rgba(0,0,0,0.9));
vertical-align: middle;
visibility: visible;
transition: all 1s;
.cat-button
position: absolute;
z-index: 90;
width: 100%;
height: 50px;
bottom: 0;
.floating-closer
position: absolute;
z-index: 90;
border-radius: 50%;
background: #FFF;
color: black;
font-size: 1rem;
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
height: 56px;
width: 56px;
right: 15px;
top: 15px;
transform: scale(0);
transition: all 0.4s;
.floating-closer.animate
transform: scale(1);
.sub-cat-tags
height: 100%;
vertical-align: middle;
padding-left: 7.5px;
padding-right: 7.5px;
margin-left: 5px;
border-radius: 5px;
background: #00F;;
font-size: 15px;
.navbar-toggler
position: absolute;
right: 8px;
top: 8px;
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8;">
<meta name="author" content="Test">
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0">
<title>
Test | Home
</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script async src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script>
$("window").ready(function ()
$('li.active').removeClass('active');
$('.home').addClass('active');
);
</script>
</head>
<body>
<header class="sticky-top">
<nav class="navbar navbar-expand-lg navbar-toggleable-md navbar-dark bg-dark">
<div class="navbar-collapse collapse w-100 order-1 order-lg-0 dual-collapse2">
<ul class="navbar-nav mr-auto">
<li class="nav-item home">
<a class="nav-link" href="/">Home</a>
</li>
</ul>
</div>
<div class="mx-auto order-0">
<a class="navbar-brand d-flex mx-auto" href="/">Test</a>
</div>
<div class="navbar-collapse collapse w-100 order-lg-3 order-3 dual-collapse2">
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
</header>
<div class="container-fluid text-white">
<div class="row row-container" id="Test-main-div">
<div class="col-12 h-100" style="overflow: hidden;">
<button class="btn floating-closer" id="Test-floating-closer" onclick="$shower('Test')">
<span>X</span>
</button>
<div class="row cat-child h-100 align-items-center m-0" id="Test" onclick="$hider('Test')">
<div class="text-center col">
<h1 class="display-1">Test</h1>
</div>
</div>
<h1 class="text-dark font-weight-bold">Divisions (content heavy) that are sitting behind.</h1>
<div class="row cat-button">
<div class="col-12">
<a href="/test">
<button id="test-btn" class="btn font-weight-bold btn-light m-0 h-100 w-100" style="visibility: hidden;">
<h5>Test</h5>
</button>
</a>
</div>
</div>
</div>
</div>
<div class="row row-container" id="Test2-main-div">
<div class="col-12 h-100" style="overflow: hidden;">
<button class="btn floating-closer" id="Test2-floating-closer" onclick="$shower('Test2')">
<img src="/img/cross.svg" height="22px" width="22px" />
</button>
<div class="row cat-child h-100 align-items-center m-0" id="Test2" onclick="$hider('Test2')">
<div class="text-center col">
<h1 class="display-1">Test2</h1>
</div>
</div>
<h1 class="text-dark font-weight-bold">Divisions (content heavy) that are sitting behind.</h1>
<div class="row cat-button">
<div class="col-12">
<a href="/test2">
<button id="test2-btn" class="btn font-weight-bold btn-light m-0 h-100 w-100" style="visibility: hidden;">
<h5>Test2</h5>
</button>
</a>
</div>
</div>
</div>
</div>
</div>
</body>
<script>$(function () $(document).click(function (event) $('.navbar-collapse').collapse('hide'); ); );</script>
</html>javascript performance jquery css animation
asked Apr 4 at 19:59
metamemelord
113
I am making a webapp that needs a division to expand on click. (The division is loaded with content, so it was likely to not animate very well, but I increased the animation time to 1s to make it look smooth) I assigned an event on it and it works absolutely fine in chrome, without hitch or flicker, but in firefox and internet explorer, these issues are there. Here is my JS function to implement this:
$activeId = '';
$hider = function($ID)
if ($activeId.length)
$shower($activeId)
;
$activeId = $ID;
$('#' + $ID).css('opacity', '0');
$('#' + $ID).css('visibility', 'hidden');
$('#' + $ID + '-main-div').animate(
height: '900px'
, 1000);
$('#' + $ID + "-btn").css('visibility', 'visible');
$('#' + $ID + "-floating-closer").addClass('animate')
;
$shower = function($ID)
$('#' + $ID).css('opacity', '1');
$('#' + $ID).css('visibility', 'visible');
$('#' + $ID + '-main-div').animate(
height: '260px'
, 800);
$('#' + $ID + "-btn").css('visibility', 'hidden');
$('#' + $ID + "-floating-closer").removeClass('animate');
$activeId = ''
;
The division that expands has these CSS properties:
.row-container
height: 260px;
After performing manual removal of elements, I have noticed that the animation affecting the overall performance is this:
$('#' + $ID + '-main-div').animate(
height: '900px'
, 1000);
Kindly note that the code works absolutely fine on Chrome, it also works on Firefox and IE as well, but with very low performance. Is there a better practice to make to the animation smoother on Firefox and IE as well?
Update: The code snippet has been posted. Kindly go through it please. Also, notice that adding the animation square-animation to the .row-container in CSS makes the animation smooth in Firefox. I read that it forces hardware acceleration for animating CSS. The performance issue persists in IE.
$activeId = '';
$hider = function($ID)
if ($activeId.length)
$shower($activeId)
;
$activeId = $ID;
$('#' + $ID).css('opacity', '0');
$('#' + $ID).css('visibility', 'hidden');
$('#' + $ID + '-main-div').animate(
height: '850px'
, 1000);
$('#' + $ID + "-btn").css('visibility', 'visible');
$('#' + $ID + "-floating-closer").addClass('animate')
;
$shower = function($ID)
$('#' + $ID).css('opacity', '1');
$('#' + $ID).css('visibility', 'visible');
$('#' + $ID + '-main-div').animate(
height: '260px'
, 800);
$('#' + $ID + "-btn").css('visibility', 'hidden');
$('#' + $ID + "-floating-closer").removeClass('animate');
$activeId = ''
;ul
margin: 0;
padding: 0;
.row-container
height: 260px;
/* animation: square-animation 5s infinite; */
@keyframes square-animation
0%, 100%
transform: rotate(0.01deg);
-ms-transform: rotate(0.01deg);
-webkit-transform: rotate(0.01deg);
-moz-transform: rotate(0.01deg);
-o-transform: rotate(0.01deg);
50%
transform: rotate(0.01deg);
-ms-transform: rotate(0.01deg);
-webkit-transform: rotate(0.01deg);
-moz-transform: rotate(0.01deg);
-o-transform: rotate(0.01deg);
.cat-child
position: absolute;
width: 100%;
top: 0;
left: 0;
z-index: 100;
background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.75), rgba(0,0,0,0.9));
vertical-align: middle;
visibility: visible;
transition: all 1s;
.cat-button
position: absolute;
z-index: 90;
width: 100%;
height: 50px;
bottom: 0;
.floating-closer
position: absolute;
z-index: 90;
border-radius: 50%;
background: #FFF;
color: black;
font-size: 1rem;
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
height: 56px;
width: 56px;
right: 15px;
top: 15px;
transform: scale(0);
transition: all 0.4s;
.floating-closer.animate
transform: scale(1);
.sub-cat-tags
height: 100%;
vertical-align: middle;
padding-left: 7.5px;
padding-right: 7.5px;
margin-left: 5px;
border-radius: 5px;
background: #00F;;
font-size: 15px;
.navbar-toggler
position: absolute;
right: 8px;
top: 8px;
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8;">
<meta name="author" content="Test">
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0">
<title>
Test | Home
</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script async src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script>
$("window").ready(function ()
$('li.active').removeClass('active');
$('.home').addClass('active');
);
</script>
</head>
<body>
<header class="sticky-top">
<nav class="navbar navbar-expand-lg navbar-toggleable-md navbar-dark bg-dark">
<div class="navbar-collapse collapse w-100 order-1 order-lg-0 dual-collapse2">
<ul class="navbar-nav mr-auto">
<li class="nav-item home">
<a class="nav-link" href="/">Home</a>
</li>
</ul>
</div>
<div class="mx-auto order-0">
<a class="navbar-brand d-flex mx-auto" href="/">Test</a>
</div>
<div class="navbar-collapse collapse w-100 order-lg-3 order-3 dual-collapse2">
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
</header>
<div class="container-fluid text-white">
<div class="row row-container" id="Test-main-div">
<div class="col-12 h-100" style="overflow: hidden;">
<button class="btn floating-closer" id="Test-floating-closer" onclick="$shower('Test')">
<span>X</span>
</button>
<div class="row cat-child h-100 align-items-center m-0" id="Test" onclick="$hider('Test')">
<div class="text-center col">
<h1 class="display-1">Test</h1>
</div>
</div>
<h1 class="text-dark font-weight-bold">Divisions (content heavy) that are sitting behind.</h1>
<div class="row cat-button">
<div class="col-12">
<a href="/test">
<button id="test-btn" class="btn font-weight-bold btn-light m-0 h-100 w-100" style="visibility: hidden;">
<h5>Test</h5>
</button>
</a>
</div>
</div>
</div>
</div>
<div class="row row-container" id="Test2-main-div">
<div class="col-12 h-100" style="overflow: hidden;">
<button class="btn floating-closer" id="Test2-floating-closer" onclick="$shower('Test2')">
<img src="/img/cross.svg" height="22px" width="22px" />
</button>
<div class="row cat-child h-100 align-items-center m-0" id="Test2" onclick="$hider('Test2')">
<div class="text-center col">
<h1 class="display-1">Test2</h1>
</div>
</div>
<h1 class="text-dark font-weight-bold">Divisions (content heavy) that are sitting behind.</h1>
<div class="row cat-button">
<div class="col-12">
<a href="/test2">
<button id="test2-btn" class="btn font-weight-bold btn-light m-0 h-100 w-100" style="visibility: hidden;">
<h5>Test2</h5>
</button>
</a>
</div>
</div>
</div>
</div>
</div>
</body>
<script>$(function () $(document).click(function (event) $('.navbar-collapse').collapse('hide'); ); );</script>
</html>$activeId = '';
$hider = function($ID)
if ($activeId.length)
$shower($activeId)
;
$activeId = $ID;
$('#' + $ID).css('opacity', '0');
$('#' + $ID).css('visibility', 'hidden');
$('#' + $ID + '-main-div').animate(
height: '850px'
, 1000);
$('#' + $ID + "-btn").css('visibility', 'visible');
$('#' + $ID + "-floating-closer").addClass('animate')
;
$shower = function($ID)
$('#' + $ID).css('opacity', '1');
$('#' + $ID).css('visibility', 'visible');
$('#' + $ID + '-main-div').animate(
height: '260px'
, 800);
$('#' + $ID + "-btn").css('visibility', 'hidden');
$('#' + $ID + "-floating-closer").removeClass('animate');
$activeId = ''
;ul
margin: 0;
padding: 0;
.row-container
height: 260px;
/* animation: square-animation 5s infinite; */
@keyframes square-animation
0%, 100%
transform: rotate(0.01deg);
-ms-transform: rotate(0.01deg);
-webkit-transform: rotate(0.01deg);
-moz-transform: rotate(0.01deg);
-o-transform: rotate(0.01deg);
50%
transform: rotate(0.01deg);
-ms-transform: rotate(0.01deg);
-webkit-transform: rotate(0.01deg);
-moz-transform: rotate(0.01deg);
-o-transform: rotate(0.01deg);
.cat-child
position: absolute;
width: 100%;
top: 0;
left: 0;
z-index: 100;
background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.75), rgba(0,0,0,0.9));
vertical-align: middle;
visibility: visible;
transition: all 1s;
.cat-button
position: absolute;
z-index: 90;
width: 100%;
height: 50px;
bottom: 0;
.floating-closer
position: absolute;
z-index: 90;
border-radius: 50%;
background: #FFF;
color: black;
font-size: 1rem;
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
height: 56px;
width: 56px;
right: 15px;
top: 15px;
transform: scale(0);
transition: all 0.4s;
.floating-closer.animate
transform: scale(1);
.sub-cat-tags
height: 100%;
vertical-align: middle;
padding-left: 7.5px;
padding-right: 7.5px;
margin-left: 5px;
border-radius: 5px;
background: #00F;;
font-size: 15px;
.navbar-toggler
position: absolute;
right: 8px;
top: 8px;
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8;">
<meta name="author" content="Test">
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0">
<title>
Test | Home
</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script async src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script>
$("window").ready(function ()
$('li.active').removeClass('active');
$('.home').addClass('active');
);
</script>
</head>
<body>
<header class="sticky-top">
<nav class="navbar navbar-expand-lg navbar-toggleable-md navbar-dark bg-dark">
<div class="navbar-collapse collapse w-100 order-1 order-lg-0 dual-collapse2">
<ul class="navbar-nav mr-auto">
<li class="nav-item home">
<a class="nav-link" href="/">Home</a>
</li>
</ul>
</div>
<div class="mx-auto order-0">
<a class="navbar-brand d-flex mx-auto" href="/">Test</a>
</div>
<div class="navbar-collapse collapse w-100 order-lg-3 order-3 dual-collapse2">
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
</header>
<div class="container-fluid text-white">
<div class="row row-container" id="Test-main-div">
<div class="col-12 h-100" style="overflow: hidden;">
<button class="btn floating-closer" id="Test-floating-closer" onclick="$shower('Test')">
<span>X</span>
</button>
<div class="row cat-child h-100 align-items-center m-0" id="Test" onclick="$hider('Test')">
<div class="text-center col">
<h1 class="display-1">Test</h1>
</div>
</div>
<h1 class="text-dark font-weight-bold">Divisions (content heavy) that are sitting behind.</h1>
<div class="row cat-button">
<div class="col-12">
<a href="/test">
<button id="test-btn" class="btn font-weight-bold btn-light m-0 h-100 w-100" style="visibility: hidden;">
<h5>Test</h5>
</button>
</a>
</div>
</div>
</div>
</div>
<div class="row row-container" id="Test2-main-div">
<div class="col-12 h-100" style="overflow: hidden;">
<button class="btn floating-closer" id="Test2-floating-closer" onclick="$shower('Test2')">
<img src="/img/cross.svg" height="22px" width="22px" />
</button>
<div class="row cat-child h-100 align-items-center m-0" id="Test2" onclick="$hider('Test2')">
<div class="text-center col">
<h1 class="display-1">Test2</h1>
</div>
</div>
<h1 class="text-dark font-weight-bold">Divisions (content heavy) that are sitting behind.</h1>
<div class="row cat-button">
<div class="col-12">
<a href="/test2">
<button id="test2-btn" class="btn font-weight-bold btn-light m-0 h-100 w-100" style="visibility: hidden;">
<h5>Test2</h5>
</button>
</a>
</div>
</div>
</div>
</div>
</div>
</body>
<script>$(function () $(document).click(function (event) $('.navbar-collapse').collapse('hide'); ); );</script>
</html>$activeId = '';
$hider = function($ID)
if ($activeId.length)
$shower($activeId)
;
$activeId = $ID;
$('#' + $ID).css('opacity', '0');
$('#' + $ID).css('visibility', 'hidden');
$('#' + $ID + '-main-div').animate(
height: '850px'
, 1000);
$('#' + $ID + "-btn").css('visibility', 'visible');
$('#' + $ID + "-floating-closer").addClass('animate')
;
$shower = function($ID)
$('#' + $ID).css('opacity', '1');
$('#' + $ID).css('visibility', 'visible');
$('#' + $ID + '-main-div').animate(
height: '260px'
, 800);
$('#' + $ID + "-btn").css('visibility', 'hidden');
$('#' + $ID + "-floating-closer").removeClass('animate');
$activeId = ''
;ul
margin: 0;
padding: 0;
.row-container
height: 260px;
/* animation: square-animation 5s infinite; */
@keyframes square-animation
0%, 100%
transform: rotate(0.01deg);
-ms-transform: rotate(0.01deg);
-webkit-transform: rotate(0.01deg);
-moz-transform: rotate(0.01deg);
-o-transform: rotate(0.01deg);
50%
transform: rotate(0.01deg);
-ms-transform: rotate(0.01deg);
-webkit-transform: rotate(0.01deg);
-moz-transform: rotate(0.01deg);
-o-transform: rotate(0.01deg);
.cat-child
position: absolute;
width: 100%;
top: 0;
left: 0;
z-index: 100;
background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.75), rgba(0,0,0,0.9));
vertical-align: middle;
visibility: visible;
transition: all 1s;
.cat-button
position: absolute;
z-index: 90;
width: 100%;
height: 50px;
bottom: 0;
.floating-closer
position: absolute;
z-index: 90;
border-radius: 50%;
background: #FFF;
color: black;
font-size: 1rem;
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
height: 56px;
width: 56px;
right: 15px;
top: 15px;
transform: scale(0);
transition: all 0.4s;
.floating-closer.animate
transform: scale(1);
.sub-cat-tags
height: 100%;
vertical-align: middle;
padding-left: 7.5px;
padding-right: 7.5px;
margin-left: 5px;
border-radius: 5px;
background: #00F;;
font-size: 15px;
.navbar-toggler
position: absolute;
right: 8px;
top: 8px;
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8;">
<meta name="author" content="Test">
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0">
<title>
Test | Home
</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script async src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script>
$("window").ready(function ()
$('li.active').removeClass('active');
$('.home').addClass('active');
);
</script>
</head>
<body>
<header class="sticky-top">
<nav class="navbar navbar-expand-lg navbar-toggleable-md navbar-dark bg-dark">
<div class="navbar-collapse collapse w-100 order-1 order-lg-0 dual-collapse2">
<ul class="navbar-nav mr-auto">
<li class="nav-item home">
<a class="nav-link" href="/">Home</a>
</li>
</ul>
</div>
<div class="mx-auto order-0">
<a class="navbar-brand d-flex mx-auto" href="/">Test</a>
</div>
<div class="navbar-collapse collapse w-100 order-lg-3 order-3 dual-collapse2">
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
</header>
<div class="container-fluid text-white">
<div class="row row-container" id="Test-main-div">
<div class="col-12 h-100" style="overflow: hidden;">
<button class="btn floating-closer" id="Test-floating-closer" onclick="$shower('Test')">
<span>X</span>
</button>
<div class="row cat-child h-100 align-items-center m-0" id="Test" onclick="$hider('Test')">
<div class="text-center col">
<h1 class="display-1">Test</h1>
</div>
</div>
<h1 class="text-dark font-weight-bold">Divisions (content heavy) that are sitting behind.</h1>
<div class="row cat-button">
<div class="col-12">
<a href="/test">
<button id="test-btn" class="btn font-weight-bold btn-light m-0 h-100 w-100" style="visibility: hidden;">
<h5>Test</h5>
</button>
</a>
</div>
</div>
</div>
</div>
<div class="row row-container" id="Test2-main-div">
<div class="col-12 h-100" style="overflow: hidden;">
<button class="btn floating-closer" id="Test2-floating-closer" onclick="$shower('Test2')">
<img src="/img/cross.svg" height="22px" width="22px" />
</button>
<div class="row cat-child h-100 align-items-center m-0" id="Test2" onclick="$hider('Test2')">
<div class="text-center col">
<h1 class="display-1">Test2</h1>
</div>
</div>
<h1 class="text-dark font-weight-bold">Divisions (content heavy) that are sitting behind.</h1>
<div class="row cat-button">
<div class="col-12">
<a href="/test2">
<button id="test2-btn" class="btn font-weight-bold btn-light m-0 h-100 w-100" style="visibility: hidden;">
<h5>Test2</h5>
</button>
</a>
</div>
</div>
</div>
</div>
</div>
</body>
<script>$(function () $(document).click(function (event) $('.navbar-collapse').collapse('hide'); ); );</script>
</html>javascript performance jquery css animation
asked Apr 4 at 19:59
metamemelord
113
edited Apr 5 at 7:46
asked Apr 4 at 19:59
metamemelord
113
asked Apr 4 at 19:59
metamemelord
113
asked Apr 4 at 19:59
metamemelord
113
113
You need to ask this question at stackOverflow stackoverflow.com. This is code review and we don't fix code problems.
– Blindman67
Apr 4 at 20:09
Hi @Blindman67 As I mentioned, the webapp performs flawlessly on Chrome. It also implements the functionality in firefox, but the performance of animation is ridiculous. That is why I posted it here; to get suggestions on how to boost the performance.
– metamemelord
Apr 4 at 20:13
1
I suggest that you make a live demo by pressing Ctrl-M in the question editor.
– 200_success
Apr 4 at 20:38
1
For the close-voters: It appears to be a performance issue, not actual broken code, so voting to not close
– Dannnno
Apr 4 at 23:33
@200_success The live demo has been updated. Thanks for help! :)
– metamemelord
Apr 5 at 7:31
 |Â
show 8 more comments
You need to ask this question at stackOverflow stackoverflow.com. This is code review and we don't fix code problems.
– Blindman67
Apr 4 at 20:09
Hi @Blindman67 As I mentioned, the webapp performs flawlessly on Chrome. It also implements the functionality in firefox, but the performance of animation is ridiculous. That is why I posted it here; to get suggestions on how to boost the performance.
– metamemelord
Apr 4 at 20:13
1
I suggest that you make a live demo by pressing Ctrl-M in the question editor.
– 200_success
Apr 4 at 20:38
1
For the close-voters: It appears to be a performance issue, not actual broken code, so voting to not close
– Dannnno
Apr 4 at 23:33
@200_success The live demo has been updated. Thanks for help! :)
– metamemelord
Apr 5 at 7:31
You need to ask this question at stackOverflow stackoverflow.com. This is code review and we don't fix code problems.
– Blindman67
Apr 4 at 20:09
You need to ask this question at stackOverflow stackoverflow.com. This is code review and we don't fix code problems.
– Blindman67
Apr 4 at 20:09
Hi @Blindman67 As I mentioned, the webapp performs flawlessly on Chrome. It also implements the functionality in firefox, but the performance of animation is ridiculous. That is why I posted it here; to get suggestions on how to boost the performance.
– metamemelord
Apr 4 at 20:13
Hi @Blindman67 As I mentioned, the webapp performs flawlessly on Chrome. It also implements the functionality in firefox, but the performance of animation is ridiculous. That is why I posted it here; to get suggestions on how to boost the performance.
– metamemelord
Apr 4 at 20:13
1
1
I suggest that you make a live demo by pressing Ctrl-M in the question editor.
– 200_success
Apr 4 at 20:38
I suggest that you make a live demo by pressing Ctrl-M in the question editor.
– 200_success
Apr 4 at 20:38
1
1
For the close-voters: It appears to be a performance issue, not actual broken code, so voting to not close
– Dannnno
Apr 4 at 23:33
For the close-voters: It appears to be a performance issue, not actual broken code, so voting to not close
– Dannnno
Apr 4 at 23:33
@200_success The live demo has been updated. Thanks for help! :)
– metamemelord
Apr 5 at 7:31
@200_success The live demo has been updated. Thanks for help! :)
– metamemelord
Apr 5 at 7:31
 |Â
show 8 more comments
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
Â
draft saved
draft discarded
Â
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f191273%2fjquery-animate-and-css-not-performing-well-in-firefox-and-internet-explorer%23new-answer', 'question_page');
);
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
You need to ask this question at stackOverflow stackoverflow.com. This is code review and we don't fix code problems.
– Blindman67
Apr 4 at 20:09
Hi @Blindman67 As I mentioned, the webapp performs flawlessly on Chrome. It also implements the functionality in firefox, but the performance of animation is ridiculous. That is why I posted it here; to get suggestions on how to boost the performance.
– metamemelord
Apr 4 at 20:13
1
I suggest that you make a live demo by pressing Ctrl-M in the question editor.
– 200_success
Apr 4 at 20:38
1
For the close-voters: It appears to be a performance issue, not actual broken code, so voting to not close
– Dannnno
Apr 4 at 23:33
@200_success The live demo has been updated. Thanks for help! :)
– metamemelord
Apr 5 at 7:31