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/

如何结束正在进行的功能

1 个答案: