Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Brandon O'Brien
Brandon O'Brien
16,031 Points

jquery hover event only fires on the first time

I'm having an issue where my hover text animation works on the first element I hover on. But it doesn't work after that unless I reload the page.

The hover works for the color change and the content change. However I'm using a jquery plugin called textillate(http://jschr.github.io/textillate/) to get a text animation added.

I've added the code to codepen however the textillate doesn't seem to be working at all on there: http://codepen.io/anon/pen/QwNPZZ

Here is the javaScript code here as well: 

$(function() {

  // cache jquery selected DOM objects
  var $title = $('#reactions'),
      $navItems = $('.nav-item'),
      defaultTitle = 'HELLO';

  $navItems.hover(function() {
      // Get new text and colour
      var newText = $(this).data('content'),
          newColour = $(this).data('colour');

      // set text and new colour
      $title.text(newText).css('color', newColour).fadeIn('slow') + 
      $('.tlt').textillate({ in: { effect: 'rollIn' } }); //this line only works on the first elemnent I hover on

    }, function() {
      // Set title's text to default and remove inline colour styling
        $title.text(defaultTitle).css('color', '');// empty string will reset the inline colour


   });

});

Your help is greatly appreciated.

2 Answers

Stefan Osorio
Stefan Osorio
16,419 Points
Stefan Osorio
Stefan Osorio
16,419 Points

Console says (on Codepen): "Refused to execute script from 'https://raw.githubusercontent.com/jschr/textillate/master/jquery.textillate.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled."

This can be solved by replacing "raw.githubusercontent.com" with "http://rawgit.com" - your codepen then behaves as you described (textillate works on exactly one hover event)

Brandon O'Brien
Brandon O'Brien
16,031 Points

Thank you for clarifying the codepen issue!

Brandon O'Brien
Brandon O'Brien
16,031 Points
Brandon O'Brien
Brandon O'Brien
16,031 Points

Any ideas on why the textillate is only working on the first hover event and not the others?