I have code which makes use of jQuery and some additional libraries. But the jQuery part is too overwhelming (and thus it does its job slowly). So I tried to optimize it, but had no luck. Now I'm seeking help from the community.
Here is the code, from the news page in my WP theme:
/*
CSS Reset
*/
html,body,div,span,applet,object,iframe,audio,video,h1,h2,h3,h4,h5,h6,h7,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark {
vertical-align: baseline;
}
#gsap-title-, #gsap-meta- {
position: relative;
}
#gsap-title- span, #gsap-meta- span {
position: relative;
display:inline-block;
-webkit-font-smoothing:antialiased;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inview/1.0.0/jquery.inview.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>
<script>
jQuery(document).ready(function($){
var $startAnim = $('[id^=start-anim]');
var $exitAnim = $('[id^=exit-anim]');
var $title = $('[id^=gsap-title-]');
var $postmeta = $('[id^=gsap-meta-]');
$($title).each(function(){
$(this).html($(this).text().replace(/./g, "<span>$&</span>").replace(/\s/g, " "))
.on('inview', function(event, isInView) {
if (isInView) {
// element is now visible in the viewport
TweenMax.staggerFromTo( $(this).find("span"), 0.4, {autoAlpha:0, rotationX:-90, top:"-30px"}, {autoAlpha:1, rotationX:0, top:"0px"}, 0.1 );
}
else {
// element has gone out of viewport
TweenMax.staggerFromTo( $(this).find("span"), 0.4, {autoAlpha:1, rotationX:0, top:"0px"}, {autoAlpha:0, rotationX:-90, top:"-30px"}, 0.1 );
}
});
});
$($postmeta).each(function(){
$(this).html($(this).text().replace(/./g, "<span>$&</span>").replace(/\s/g, " "))
.on('inview', function(event, isInView) {
if (isInView) {
TweenMax.staggerFromTo( $(this).find("span"), 0.09, {autoAlpha:0, scale:2}, {autoAlpha:1, scale:1}, 0.01 );
}
else {
TweenMax.staggerFromTo( $(this).find("span"), 0.09, {autoAlpha:1, scale:1}, {autoAlpha:0, scale:2}, 0.01 );
}
});
});
});
</script>
</head>
<body>
<div id="gsap-title-">This is title</div>
<div id="gsap-meta-1">To start animation, click Run. </div>
<div id="gsap-meta-2">Then click here, or resize the height of this window (simulate 'inview' event). </div>
</body>
As you can see, this whole code is too overwhelming. Thus I tried to simplify the jQuery code.
I tried to process $title
and $postmeta
with .html()
simultaneously, and only then pass them to .on()
. Thus :
$([$title, $postmeta]).each(function(){
// ...did work, but incorrectly - all $title
and $postmeta
were processed, but at the output - in each line containing some id=gsap-title-
, all matching elements gsap-title-1, gsap-title-2... gsap-title-n
are displayed (the same as gsap-meta-), ...all of them, in each line ( e.g. merged in an unwanted manner);
Also I had a look at .add()
, .concat()
and .push()
but according to examples, output is similar to .merge()
method.
To sum up: current state - lots of code, lots of similar jQuery code, desired state - less jQuery code, with the same functionality.