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 KnowledgeWoods Consulting
KnowledgeWoods Consulting
5,607 Points

Hover animation in Javascript

I want to implement this animation but i don't know how to do it. Can someone explain it to me in easy way? http://www.backslash.gr/demos/contenthover-jquery-plugin/#demo2

2 Answers

Kennard McGill
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Kennard McGill
Full Stack JavaScript Techdegree Graduate 45,774 Points
Kennard McGill
.a{fill-rule:evenodd;}techdegree seal-36
Kennard McGill
Full Stack JavaScript Techdegree Graduate 45,774 Points

Ok I'm assuming you have downloaded the jquery plugin source file and added it to your page.

You need to make sure you have the jquery library file. you can go to jquery.com and get the link. You can put it in your head section or just below the closing body tag. If you have these two in place you should be 80% there. Just use the html and css examples they give to to test the code.

I' haven't looked to deeply but it looks like you can then use the examples to create custom effects.

< script src="//code.jquery.com/jquery-1.11.0.min.js"> </ script> < script src="yourwebsite/js/jquery.contenthover.js"> </ script>

<script >
$(document).ready(function(){

$ ('#d1').contenthover({ overlay_background:'#000', overlay_opacity:0.8});

</script>

Kennard McGill
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Kennard McGill
Full Stack JavaScript Techdegree Graduate 45,774 Points
Kennard McGill
.a{fill-rule:evenodd;}techdegree seal-36
Kennard McGill
Full Stack JavaScript Techdegree Graduate 45,774 Points

Are you referring to the jQuery because everything seems to be well documented.

<script> $(document).ready(function(){

$('#d1').contenthover({ overlay_background:'#000', overlay_opacity:0.8 });

}); </script>

Hope this helps

KnowledgeWoods Consulting
KnowledgeWoods Consulting
5,607 Points

Its not working for me. I am new to Jquery and i really don't know what to do. Can you please help?