Interactive pop-up bubbles with jQuery & CSS

08 Set up the events
We need two events for each of our badges: one for mouseover and a second for mouseout. When the user mouses over the badge, we’re going to set some CSS properties to move the bubble down a little before animating it back into position, and to make sure it’s hidden by setting opacity to 0, and display to Block. Add the code below inside your second <script> tags:

$(document).ready(function(){
$(“.moreinfo”).each(function(){
var t;
var isanimated = false;
var isvisible = false;
var popup = $(“.floatingpanel”,this);
$(this).mouseover(function(){
/* Mouseover code in here */
}).mouseout(function(){
/* Mouseout code in here */
});
});
});

09 Animate the appearance
We’re going to use the animate function that’s built into jQuery to animate the opacity of the bubble from 0 (invisible) to 1 (visible). At the same time we’ll move the bubble back up into position so that it appears to puff up into existence. Before we can do that, we need to set the CSS of the bubble to start in the right place. Add the code below inside the mouseover area of the script then test in your browser to view the effect:

popup.css({opacity:0,display:”block”,marginTop:15}).animate({marginTop:0,opacity:1},500);

10 Animate the disappearance
We want our bubble to animate out of view in a similar way to how it appears, so we’re more or less doing the same animation, but with the opacity moving from 1 to 0 instead of the other way around. Insert the code below inside the mouseout code area:

popup.animate({marginTop:-10,opacity:0},500);

11 Test in your browser and adjust
The basic effect is now complete. Test in your browser and adjust the settings to suit your preference. The line of jQuery code popup.css({opacity:0,display:”block”,marginTop:15}) in the mouseover section sets the starting position and opacity of the bubble. Note that we’re using marginTop to animate the position. The line.animate({marginTop:0,opacity:1},500); sets the end position and opacity, and the time (500 milliseconds).

12 Add a delay
The bubble disappears too quickly so wrap the mouse-off function inside a setTimeout function. This will allow us to wait for the specified time (we’ve opted for 500 milliseconds here) before running the animation to hide the bubble. By adding a clearTimeout function call to the mouseover, we get the added benefit of allowing the user to mouse off the badge and move back over the badge within half a second without the bubble disappearing. Update your code to look like that below:

var t;
$(this).mouseover(function(){
if (t) clearTimeout(t);
popup.css({opacity:0,display:”block”,marginTop:15}).animate({marginTop:0,opaci
ty:1},500);
}).mouseout(function(){
if (t) clearTimeout(t);
t = setTimeout(function(){isanimated=true;popup.animate({marginTop:-
10,opacity:0},500}, 500);
});

13 Test for existing animation
There’s a problem if you mouse off and back on to the badge while the animation is running. To solve this we need to add a check to see if the animation is in progress and if it is, ignore the mouseover/mouseoff. Update your code to look like the below noting the new if () statements that check for animation, and the new call back function at the end of the animation that sets the isanimated property to false: (new code set in bold)

$(document).ready(function(){
$(“.moreinfo”).each(function(){
var t;
var isanimated = false;
var isvisible = false;
var popup = $(“.floatingpanel”,this);
$(this).mouseover(function(){
if (t) clearTimeout(t);
if (!isvisible && !isanimated){
isanimated = true;
popup.css({opacity:0,display:”block”,marginTop:15}).animate({marginTop:0,opacit
y:1},500, function(){isanimated=false;isvisible=true;});
} else {
return;
}
}).mouseout(function(){
if (t) clearTimeout(t);
if (!isanimated && isvisible){
t = setTimeout(function(){isanimated=true;popup.animate({marginTop:-
10,opacity:0},500, function(){popup.css({display:”none”});isvisible=false;isanimate
d=false;});}, 500);
} else {
return;
}
});
});
});

14 Tidy up and add more hotspots
Get your code all tidy and properly indented. Make sure you’ve removed any console.log() or alert() statements you added to test the events firing. Work your way around the document adding additional hotspots where required. Here we’ve got 18 individual hotspots, so you’ll see the benefit of splitting the position out from the rest of the visual characteristics of the pop-ups. Once you’ve got all your content in place, test thoroughly cross-browser to make sure everything works as it should.

END

(This article originally appeared in Web Designer issue 160, authored by Sam Hampton-Smith)

Pages: 1 2 3