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 Add a Sticky Navigation Bar Adding Sticky Navigation

Anwar Rizalman
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Anwar Rizalman
Python Development Techdegree Graduate 33,620 Points
Posted by Anwar Rizalman
.a{fill-rule:evenodd;}techdegree seal-36
Anwar Rizalman
Python Development Techdegree Graduate 33,620 Points

The transition-property was not defined anywhere in the css?

I thought when we we want an element to receive a transition effect, the 'transition-property' property must be defined in the target element we want to apply it to. However I don't see any transition-property in the main.css file.

Can anyone please clear my doubt in this part? Thank you

1 Answer

Steven Parker
Steven Parker
231,236 Points
Steven Parker
Steven Parker
231,236 Points

You're right when transitions are being done using CSS. But here, transition effects are being done using JavaScript and the animsition plug-in, so no CSS is involved.

Anwar Rizalman
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Anwar Rizalman
Python Development Techdegree Graduate 33,620 Points
Anwar Rizalman
.a{fill-rule:evenodd;}techdegree seal-36
Anwar Rizalman
Python Development Techdegree Graduate 33,620 Points

But the transition styling for the background-color transition was written under the .css file though. Am I missing something here? Or are you saying that the transition-property was wrriten in the .js file?

Steven Parker
Steven Parker
231,236 Points
Steven Parker
Steven Parker
231,236 Points

The transition-property CSS value would be used for CSS transitions. But JavaScript/animsition provides a different way of creating effects that does not require or use that property.

Anwar Rizalman
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Anwar Rizalman
Python Development Techdegree Graduate 33,620 Points
Anwar Rizalman
.a{fill-rule:evenodd;}techdegree seal-36
Anwar Rizalman
Python Development Techdegree Graduate 33,620 Points

I see. So I can assume that the other 'transition' property in other element selected in the .css file is also done using Javascript since there is no 'transition-property' being declared anywhere in the code.

Steven Parker
Steven Parker
231,236 Points
Steven Parker
Steven Parker
231,236 Points

Without seeing the actual code you are referring to, it's a bit of a guess. But it seems likely, and particulary since this is a course about jQuery plug-ins.

Xiaoxuan Wang
Xiaoxuan Wang
4,590 Points
Xiaoxuan Wang
Xiaoxuan Wang
4,590 Points

Hi Steven,

I'm confused with this problem too. Why does transition effects done using JS? And what is the different between transitions and transition effects?

Thank you

Steven Parker
Steven Parker
231,236 Points
Steven Parker
Steven Parker
231,236 Points

CSS transitions are "transition effects". All that means is that you will see things changing on the screen.

The transition effects are being done in JS here because this is a course on jQuery plugins. In actual practice, I would generally recommend using CSS transitions instead when possible. But not every kind of effect can be done in CSS, so sometimes you can only do what you want by using JS.