Play with jQuery
This is how this “game” works. The flashing text says “LOOK AT ME”. When you hover just underneath the text it reveals a little cartoon girl. It covers the girl again when you move the mouse away quickly. When you click the “LOOK AT ME” text the sliding animation will end. Refresh it if you wanna see the animation again.
To see the Demo
This is how to do it:
Simple HTML
<div id="nav"> <div id="girl"> <a href="#">LOOK AT ME</a></div> </div>
CSS to add background image
#nav{background:url(images/girl-11.png) no-repeat;width:150px;height:150px;top:100px;left:400px;position:absolute;} #gate{position:absolute;background:#fff;width:50px;height:50px;padding:50px;} #girl a{position:absolute;top:-20px;left:10px;color:pink;font-weight:bold;font-family:arial;text-decoration:none;font-size:18px;}
Javascript
- jQuery Infinite Loop from line 2 to line 9:basically you make a loop start with show end with hide. Put anything you want in between and put this in a runIt function. This is also useful if you wanna do a warning sign.
- Sliding effect from line 10 to line 25:This is very similar to my previous tutorial on Make fancy light up RSS button with jQuery I changed fadeTo to slideUp and slideDown, inserted line 21 cause it has slide down from a hiding state.
$(document).ready(function() { function runIt() { $("#girl a").show(100); $("#girl a").fadeTo(500,0); $("#girl a").fadeTo(500,1); $("#girl a").fadeTo(500,0); $("#girl a").hide(1, runIt); } runIt(); $(function () { $('#girl') // create our new span.hover and loop through anchor: .append('<span id="gate" class="hover">').each(function () { var $span = $('> span.hover', this).css('opacity', 1); // when the user hovers in and out $(this).hover(function () { // on hover $span.stop().slideUp(1200); }, function () { // off hover $span.hide(); $span.slideDown(1500); }); }); }); }); </span>
Conclusion
You are welcome to copy the code and experiment with it. I believe the next web trend will be “game like” interactions and jQuery is a great framework to do all sorts of fancy effects. Learn more and prepare yourself for the challenge.
ADD TO
