Nested Bubbles

by rjurd

HTML

<div class='bubble_group'>
    <span>nested</span>
    <span>bubble</span>
    <span>function</span>
</div>

JavaScript

var timeoutID=0;

$(function() {
    $(".bubble_group span").css('display', 'none');
    $(".bubble_group span").eq(0).css('display', 'inline');

    $(".bubble_group span").each(function(index, em) {
        $(em).mouseover(function() {
            window.clearTimeout(timeoutID);
            delete timeoutID;
            $(em).next().css('display', 'inline');
        });
    });
    $(".bubble_group").each(function(index, em) {
        $(em).mouseleave(function() {
            timeoutID = window.setTimeout(function() {
                $(em).find('span').css('display', 'none');
                $(em).find('span').eq(0).css('display', 'inline');
            }, 1000)
        })
    });
});