如何结束当前功能

我有此脚本如何结束当前功能

$(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效果就会有问题。如果客户端将鼠标悬停在某个选项卡上，然后直接悬停在另一个选项卡上，则该功能将无法工作，因为在另一个选项卡再次需要相同的功能之前，该功能尚未完成，这会导致完全“不好看”的淡入淡出菜单。

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

我也知道，我能做的，而不是.hover功能。点击功能，但我宁愿希望.hover

来源

2012-02-22 Philip

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

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

的.stop()将停止任何当前对元素的动画，如果你想排队其他动画，这是非常有用的。另外，我将.fadeOut()更改为.fadeTo()，因为当您使用.stop()时，如果停止动画的一半，但它会卡住半透明。

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

来源

2012-02-22 22:46:53 Jasper

你解决的情况下..！^_ ^你不知道我花了多少小时试图阻止这个功能并拖延......你能解释一下为什么脚本正在做它做的事吗？ – Philip 2012-02-22 22:50:16

当你这么说的时候，这很合乎逻辑 – Philip 2012-02-22 22:54:57

http://api.jquery.com/stop - >这个文档将解释'.stop（）'的作用。简答，它会阻止元素上的以前的动画完成，因此新的动画可以立即开始。 – Jasper 2012-02-22 22:55:20

如何结束当前功能

回答

相关问题