Question

I have made this script

$(document).ready(function(){
    $("div#tabs a").hover(function(){
        rod = this.id
        $('div.tabber').hide();
        $('#tabber_' + rod).fadeIn();
        $("div#tabs a").removeClass("tab_active");
        $(this).addClass("tab_active");
    });
});

and the html:

<div id="tabs"> <!-- begin #tabs -->
        <!-- begin #tab1 --><a id="tab1" class="tab_active">What are you?</a> <!-- end #tab2 -->
        <!-- begin #tab2 --><a id="tab2">Products</a> <!-- end #tab2 -->
        <!-- begin #tab3 --><a id="tab3">Services</a> <!-- end #tab3 -->
        <!-- begin #tab4 --><a id="tab4">Contact Us</a> <!-- end #tab4 -->
      </div> <!-- end #tabs -->

<div id="tabs_tabber"> <!-- begin #tabs_tabber -->
            <div class="tabber" id="tabber_tab1"> <!-- begin #tabber_tab1 -->
                <a id="m_btn1" href="#">business</a><br />
                <a id="m_btn" href="#">private</a><br />
            </div><!-- end #tabber_tab1 -->
            <div class="tabber" id="tabber_tab2" style="display:none;"> <!-- begin #tabber_tab2 -->
                <a id="m_btn1" href="#">Apple</a><br />
                <a id="m_btn" href="#">Microsoft</a><br />

            </div> <!-- end #tabber_tab2 -->
            <div class="tabber" id="tabber_tab3" style="display:none;"> <!-- begin #tabber_tab3 -->
                <a id="m_btn1" href="#">Education</a><br />
                <a id="m_btn" href="#">Installation</a><br />
            </div> <!-- end #tabber_tab3 -->
            <div class="tabber" id="tabber_tab4" style="display:none;"> <!-- begin #tabber_tab4 -->
                <a id="m_btn1" href="#">Menu Btn</a><br />
                <a id="m_btn" href="#">Menu Btn</a><br />
                <a id="m_btn" href="#">Menu Btn</a><br />
            </div> <!-- end #tabber_tab4 -->
        </div> <!-- end #tabs_tabber -->

I have noticed, that if I do the .fadeIn effect there will be a problem. If the client is ‘hover’ a tab and then directly hover another tab, the function will not work because it is not done before the other tab requires the same function again, which will result in totally “not-good-looking” fading menu.

It is difficult to explain because of my bad english, but if someone please could try just look at it and perhaps telling me if there is some way to end the function before it will be requested again.

I also know that I can do the .click function instead of .hover function, but I rather want the .hover

Answer 1

You can change $('#tabber_' + rod).fadeIn(); to:

$('#tabber_' + rod).stop().fadeTo(250, 1);

The .stop() will stop any current animations on the element(s) which is useful if you want to queue-up another animation. Also I changed .fadeOut() to .fadeTo() because when you use .stop(), if you stop the animation half of the way though it will get stuck half-transparent.

Here is a demo: http://jsfiddle.net/4vLty/