jquery - What specifically is wrong with the JavaScript that I've provided? -

i new javascript, have prior experience front-end development whole. attempting have js iterate on list provided , display results on site. each item displayed once before moving onto next in list. when reaches end, last item permanently displayed. using textillate js library.

what's wrong code?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <script> var title-transitions = [     "create solutions",     "build relationships",     "design brands",     "redifine excellence"     ],      transitioncounter = 0,     looped = false,     textillatesettings ={       loop:false,       in:{         callback:fucntion(){           if(!looped) $('h1.introduction-heading').fadeout(3800);         }       }     };  var $h1 = $('h1.introduction-heading'); $h1.introduction-heading(textillatesettings);  var animationhero = set interval(function(){   transitioncounter =   (transitioncounter == transition.legnth -1)   ? 0 : transitioncounter + 1;    if(transitioncounter == 0){     looped = true;     clearinterval(animatedhero);   }    $('h1.introduction-heading').remove();   $('h1.introduction-heading')     .text(transition[transitioncounter])     .textillate(textillatesettings);  }, 6000); </script> 

here url textillate site, if of assistance.

there quite few problems code, i'll answer obvious syntax breaking ones first, , once fix perhaps have go.

callback: fucntion(){     if(!looped) $('h1.introduction-heading').fadeout(3800); } 

^ misspell of 'function'

$h1.introduction-heading(textillatesettings); 

^ this? you've selected element class name, if want apply textillate text

$h1 = $('.introduction-heading');  $h1.textillate(textillatesettings); 

and finally:

var animationhero = set interval(function(){ 

the method want call setinterval 1 word

hopefully these obvious issues should closer solution. try careful cleaning syntax. :)