-1

I am fairly new to JavaScript, but have prior experience with front-end development as a whole. I am attempting to have JS iterate over the list provided and display the results on my site. Each item will be displayed once before moving onto the next in the list. When it reaches the end, the last item will be permanently displayed. I am using the Textillate JS library.

What's wrong with my 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 is the url to the textillate site, if it could be of any assistance.

showdev
  • 28,454
  • 37
  • 55
  • 73
user5141180
  • 1
  • 7
    How about the indentation? – DavidG Jul 21 '15 at 22:37
  • 3
    Open the browser's JavaScript console. You'll see the error messages there. You have some syntax errors. – JJJ Jul 21 '15 at 22:41
  • 4
    [Dashes are not allowed](http://stackoverflow.com/questions/5516106/are-dashes-allowed-in-javascript-variable-names) in JavaScript variable names. – showdev Jul 21 '15 at 22:41

1 Answers1

0

There are quite a few problems with this code, but I'll only answer the obvious syntax breaking ones first, and once you fix those perhaps you could have another go.

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

^ misspell of 'function'

$h1.introduction-heading(textillateSettings);

^ what is this? you've selected an element by class name, if you want to apply textillate to some text it would be 

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

$h1.textillate(textillateSettings);

and then finally:

var animationHero = set Interval(function(){

the method you want to call is setInterval as one word

Hopefully these obvious issues should get you closer to a solution. Try to be careful about cleaning up syntax. :)

Pure Function
  • 2,129
  • 1
  • 22
  • 31