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 Using jQuery Plugins Introducing jQuery Plugins Adding a Plugin to a Web Page

Posted by Elliot Liebman
.a{fill-rule:evenodd;}techdegree seal-36
Elliot Liebman
Full Stack JavaScript Techdegree Graduate 20,304 Points

Blank Page, until I comment out Animsition.css

My page is blank, but when I comment out Animsition.css everything displays.

Funnier still, when I go into Animsition.css and edit the very first rule, I've been able to get it to display. When I remove the the comma between .animsition and .animsition-overlay, or if I add a comma after .animsition-overlay, the page displays perfectly.

This is bizarre. Any input would be appreciated. -Elliot

Snippet of Animsition.css:

.animsition,
.animsition-overlay {
  position: relative;
  opacity: 0;

  -webkit-animation-fill-mode: both;
       -o-animation-fill-mode: both;
          animation-fill-mode: both;
}
Lee Vaughn
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Lee Vaughn
Treehouse Teacher
Lee Vaughn
.a{fill-rule:evenodd;}techdegree seal-36
Lee Vaughn
Treehouse Teacher

I am having the same issue. I was able to get the page to load by adding or removing a comma as you suggested but the plugin doesn't seem to be working. When I click to go to another page there is no fade out effect.

Samuel Fortunato
Samuel Fortunato
20,229 Points
Samuel Fortunato
Samuel Fortunato
20,229 Points

Same issue. When I try editing the first few lines of code in animsition.css like you suggested, the page displays, but doesn't do any special fade effects.

2 Answers

Samuel Fortunato
Samuel Fortunato
20,229 Points
Samuel Fortunato
Samuel Fortunato
20,229 Points

My issue was that I was doing this:

<script src="js/jquery.animsition.min.js"></script>

I was looking for jquery.animsition.min.js in the js folder, whereas I SHOULD'VE been looking for it in the js/animsition path. Your code should look like this:

<script src="js/animsition/jquery.animsition.min.js"></script>

That was my mistake. Always check your paths to make sure they are correct! Check them for the proper .js files, and .css files as well. Hopefully this helps you as well.

Jason Sikes
PLUS
Jason Sikes
Courses Plus Student 10,202 Points
Jason Sikes
Jason Sikes
Courses Plus Student 10,202 Points

I am having the same problem. If I try going to other pages it does not work and when I look at the console it shows that the jquery code is not valid $(".animsition").animsition(); main.js:1 Uncaught ReferenceError: $ is not defined at main.js:1