I've been struggling with a slow and choppy jQuery animation despite trying various techniques to improve its speed. I've attempted stopping existing animations before starting new ones, ensuring animations are only performed when necessary, and even incorporating jquery.gsap.js. Additionally, I've experimented with CSS animations but have yet to achieve the level of smoothness I desire. Does anyone have any suggestions on how I can optimize the performance of my animation?
For reference, here is the jsfiddle link.
<section id="vertical-strips">
<ul>
<li style="background-image:url(im1.jpg)">t1</li>
<li style="background-image:url(im2.jpg)">t2</li>
<li style="background-image:url(im3.jpg)">t3</li>
<li style="background-image:url(im4.jpg)">t4</li>
<li style="background-image:url(im5.jpg)">t5</li>
<li style="background-image:url(im6.jpg)">t6</li>
<li style="background-image:url(im7.jpg)">t7</li>
</ul>
</section>
#vertical-strips {
width: 100%;
height: 100vh;
max-width: 100%;
overflow: hidden;
}
#vertical-strips ul {
padding:0;
margin:0;
list-style: none;
display: table;
table-layout: fixed;
width: 100%;
max-width: 100%;
height:100%;
overflow: hidden;
}
#vertical-strips ul li {
margin: 0px;
display: table-cell;
overflow: hidden;
text-align: center;
vertical-align: middle;
font-size: 2vw;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
items = $("#vertical-strips ul li");
items.each(function(i) {
$(this).hover(function() {
size = $(window).width()/items.length;
items.each(function(j) {
if (j != i) {
if ($(this).width() > size - (40.0/items.length) + 5) {
$(this).stop();
$(this).animate({width:size - (40.0 / items.length)}, "fast");
}
}
});
$(this).stop();
$(this).animate({width:size + 40}, "fast");
},
function() {}
);
});