Create a jQuery Popup Bubble
Create a jQuery Popup Bubble
Learn how to add a cool popup bubble to an RSS feed link using jQuery.
View The DEMO
Javascript
$(document).ready(function(){ $(".rss-popup a").hover(function() { $(this).next("em").stop(true, true).animate({opacity: "show", top: "-60"}, "slow"); }, function() { $(this).next("em").animate({opacity: "hide", top: "-70"}, "fast"); }); });
HTML
<div class="rss-popup"> <a href="feed-link" id="rss-icon">RSS Feed</a> <em>Subscribe to our RSS Feed</em> </div>
CSS
.rss-popup { margin: 100px auto; padding: 0; width: 100px; position: relative; } div.rss-popup em { background: url(bubble.png) no-repeat; width: 100px; height: 49px; position: absolute; top: -70px; left: -0px; text-align: center; text-indent: -9999px; z-index: 2; display: none; } #rss-icon { width: 42px; height: 42px; background: url(icon.png) no-repeat 0 0; text-indent: -9999px; margin: 0 auto; display: block; }
And there you have it. This technique could be used for lots of other things. Experimenting is the best way to learn new techniques, so go on, see what you can come up with.
UPDATE: Thanks to Reinaldo the the issue when repeatedly moving the mouse past the link has been fixed.
You write your thoughts
Please login to post comments here from the right corner.
25 January 2010 Monday




