如何结束正在进行的功能

Question

我已经制作了这个脚本

$(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");
    });
});

和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 -->

我注意到，如果我执行 .fadeIn 效果将会出现问题。如果客户端“悬停”一个选项卡，然后直接悬停另一个选项卡，则该功能将不起作用，因为在另一个选项卡再次需要相同功能之前尚未完成，这将导致完全“不好看”的褪色菜单。

由于我的英语不好，很难解释，但如果有人可以尝试看看它，也许告诉我是否有某种方法可以在再次请求之前结束该功能。

我也知道我可以执行 .click 函数而不是 .hover 函数，但我更想要 .hover

Answer 1

您可以将 $('#tabber_' + rod).fadeIn(); 更改为：

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

.stop() 将停止元素上的任何当前动画如果您想对另一个动画进行排队，这很有用。另外，我将 .fadeOut() 更改为 .fadeTo() 因为当您使用 .stop() 时，如果您停止动画的一半虽然它会卡在半透明的方式。

这是一个演示： http://jsfiddle.net/4vLty/