javascript callout overlay issue

[LogicWeb]

Could someone please explain to me how to fix the callout issues where they do not hide again after the mouse hover is moved away from the icons on the home page?

Thanks.

This is part of the js code in the head section

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.core.js"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.slide.js"></script>

<script>

$(document).ready(function () {

    // TOP NAV DROPDOWNS
    $('nav div ul li').hover(
        function () {
            $(this).children('div').slideDown("fast");
        }, 
        function () {
            $(this).children('div').slideUp("fast");
        }
    );

    // HOMEPAGE SERVICES SLIDE OUTS
    $('.right-slide a').hover(
        function () {
            $(this).siblings('.info-bubble').show('slide', {direction: 'left'}, 100);
        }, 
        function () {
            $(this).siblings('.info-bubble').hide('slide', {direction: 'left'}, 100);
        }
    );
    $('.left-slide a').hover(
        function () {
            $(this).siblings('.info-bubble').show('slide', {direction: 'right'}, 100);
        }, 
        function () {
            $(this).siblings('.info-bubble').hide('slide', {direction: 'right'}, 100);
        }
    );

    // RESETS POPULATED FIELDS
    $('.clear-field').each(function() {
        var default_value = this.value;
        $(this).focus(function() {
            if(this.value == default_value) {
                this.value = '';
                $(this).removeClass('clear-field');

            }
        });
        $(this).blur(function() {
            if(this.value == '') {
                this.value = default_value;
                $(this).addClass('clear-field');
            }
        });
    });

});
</script>

[AleMonteiro]

Post your html structure for the menu.

You can try one thing, instead of using slide to hide/show try using hide/show without effects.
I suggest you try it, because the problem may be in the effects.

[LogicWeb]

I really like the slide callout style though, it's modern and nice. I'm sure there is a way to fix it.

This is the html code:

        <div class="home-services">

            <div class="home-service right-slide home-web-hosting">
                <a href="/web-hosting/">WEB HOSTING</a>
                <div class="info-bubble">
                    <h2>Web Hosting</h2>
                    Company's custom server clustering and all-out IT management services keep your hosting needs running efficiently.
                </div>
            </div>

            <!--- RESELLERS -->
            <div class="home-service right-slide home-resellers">
                <a href="/resellers/">RESELLERS</a>
                <div class="info-bubble">
                    <h2>Resellers</h2>
                    Company's free Auto-Install Script Hosting Software, free White-Label Name Servers, intuitive Domain Panels and organic site builder options get you up and running in no time.
                </div>
            </div>

            <!--- VPS -->
            <div class="home-service right-slide home-vps">
                <a href="/virtual-private-servers/">VPS</a>
                <div class="info-bubble">
                    <h2>Virtual Private Servers</h2>
                    Company's robust 
                    managed VPS servers and strong system resources offer 
                    top-shelf performance at a fraction of the cost of dedicated 
                    servers.
                </div>
            </div>

            <!--- SEARCH-->
            <div class="home-service left-slide home-search">
                <a href="/other-services/domain-registration.php">DOMAIN<br>SEARCH</a>
                <div class="info-bubble">
                    <h2>Domain Search</h2>
                    Easily transfer your current domain to LogicWeb. You can also register a new domain, bulk domains with significant discounts. We offer over 30 TLDs to 
                    register from.
                </div>
            </div>

            <!--- DEDICATED SERVERS -->
            <div class="home-service right-slide home-dedicated-servers">
                <a href="/dedicated-servers/">DEDICATED<br>SERVERS</a>
                <div class="info-bubble">
                    <h2>Dedicated Servers</h2>
                    Need IT support? Company's managed dedicated servers and clustering possibilities, certified 24/7  Support engineers , IAVA/CloudLinux hosting 
                    focused on quality. We'll manage your data so you don't have to.
                </div>
            </div>

            <!--- LOGICWEB VIDEO -->
            <div class="home-service left-slide home-logicweb-video">
                <a href="/">NETWORK TOUR</a>
                <div class="info-bubble">
                    <h2>Network Tour</h2>
                    Watch a brief video tour of our network infrastructure and learn more about our dedication to data protection, network redundancy and state-of-the-art data
                    center facility.     
                </div>
            </div>

            <!--- CLOUD HOSTING -->
            <div class="home-service left-slide home-cloud-hosting">
                <a href="/cloud-hosting/">CLOUD<br>HOSTING</a>
                <div class="info-bubble">
                    <h2>Cloud Hosting</h2>
                    Company's Groundbreaking Hosting offers security, stability and superior server uptime, making traditional server instability issues yesterday's news.
                </div>
            </div>

            <!--- OTHER SERVICES -->
            <div class="home-service left-slide home-other-services">
                <a href="/other-services/email.php">OTHER<br>SERVICES</a>
                <div class="info-bubble">
                    <h2>Other Services</h2>
                    Domains, Colocation, Marketing, SSL, Merchant Accounts—whatever you need, it's here.
                </div>
            </div>

        </div>

[AleMonteiro]

But did you test without to see if that is the problem?

[AleMonteiro]

You could try this also:

$('.right-slide').hover(
    function () {
        $(this).children('.info-bubble').show('slide', {direction: 'left'}, 100);
    }, 
    function () {
        $(this).children('.info-bubble').hide('slide', {direction: 'left'}, 100);
    }
);
$('.left-slide').hover(
    function () {
        $(this).children('.info-bubble').show('slide', {direction: 'right'}, 100);
    }, 
    function () {
        $(this).children('.info-bubble').hide('slide', {direction: 'right'}, 100);
    }
);