Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript Using jQuery Plugins Introducing jQuery Plugins Adding a Plugin to a Web Page

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

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

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

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.

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