javascript - CSS fade with JS callback to set css display on completion interrupts animation -

edit: jsfiddle per request: https://jsfiddle.net/5anz0kgt/1/

edit 2: seems animation interruption in fact related order of elements... if new banenr layer on top of old one, animation smooth. if new banner beneath, animation appears choppy. new question therefore becomes why, , how can fix this?

i finishing small banner, , having trouble animations.

originally, had following functions controlling banner visibility , animations (which worked):

function fadeout(el){     el.style.transition = "opacity 0.5s linear 0s";     el.style.opacity = 0; }  function fadein(el){     el.style.transition = "opacity 0.5s linear 0s";     el.style.opacity = 1; } 

but noticed (of course) made buttons unclickable on banners due element stacking.

i therefore decided set display: none on non visible banner layers. fading in, added

el.style.display = ""; 

but fading out needed insure css animation had completed before hide layer. added (courtesy of http://davidwalsh.name/css-animation-callback):

var transitionevent = whichtransitionevent(el);     transitionevent && el.addeventlistener(transitionevent, function() {         el.style.display = "none";     }); 

to end of fadeout() function. issue transition abrupt (most of time - seems work small subset of time).

leaving display code in fadein() works, pointing fadeout() changes issue. watching in firebug, can see display changes coming play after opacity animation finishes, however.

how can insure display code doesn't interrupt animation, or alternatively, how else can solve element stacking problem?

ok, i've had @ code. i've created fix transition issue setting z-index in fadeout/fadein functions ensure correct element visible on top regardless of stacking.

furthermore, there bug. animation loop continues regardless of user input user interaction , automatic looping fight against each other, around can use clearinterval stop setinterval function (specifically animation loop in case).

here jsfiddle demonstrating both of above https://jsfiddle.net/lmtpw6yq/3/ note i've add function select_banner called onclick instead of activate_banner animation loop can interrupted:

// stores id of current animation loop setinterval can interrupt var animationtick;  function select_banner(banner_id) {    if (animationtick) {        // stop animation loop        window.clearinterval(animationtick);     }     activate_banner(banner_id);     animation_loop(); } 

animationtick set id of current setinterval tick in animation loop function calling setinterval so:

function animation_loop() {     animationtick = setinterval(function(){         ...      }, 3000); } 

one final note while loops. work terribly inefficient, firstly using getelementbyid repeatedly find same elements causing js traverse dom on , on again unnecessarily. condition breaking while loops (i.e. searching id doesn't exist) causes js check id of literally every node in document less ideal.

since number of banners doesn't change better find banners once , store references them in array @ beginning use loops loop on array instead of while loops.