jQuery悬停标签

Question

我试图创建简单的jQuery选项卡。标签内容应显示在悬停上。所以我正在尝试下面的代码。问题是，如果您将鼠标悬停在标签标题上的速度足够快，则在显示正确的标签内容之前，仍然可以看到其他标签内容。

演示：

请参阅小提琴链接，看问题： http://jsfiddle.net/0v9nhxu3/

代码：

jQuery(document).ready(function($) { 
    $(".tab-titles li").hover(function() { 
     $(".tab-content").hide(); 
     $(".tab-titles li").removeClass('active');     
     $(this).addClass("active");     
     var selected_tab = $(this).find("a").attr("href"); 
     $(selected_tab).fadeIn(); 
     return false; 
    }); 
}); 

Answer 1

使用stop()fadeIn之前停止当前正在运行的动画。

jQuery(document).ready(function($) { 
    $(".tab-titles li").hover(function() { 
     $(".tab-content").hide(); 
     $(".tab-titles li").removeClass('active');     
     $(this).addClass("active");     
     var selected_tab = $(this).find("a").attr("href"); 
     $(selected_tab).stop().fadeIn(); 
     return false; 
    }); 
}); 

Fiddle Demo

Answer 2

jQuery(document).ready(function($) { 
     $(".tab-titles li").hover(function() { 
      $(".tab-content").removeClass('tab-show'); 
      $(".tab-titles li").removeClass('active');     
      $(this).addClass("active");     
      var selected_tab = $(this).find("a").attr("href"); 
      $(selected_tab).addClass("tab-show"); 
      return false; 
     }); 
    }); 

http://jsfiddle.net/0v9nhxu3/9/

Answer 3

快捷方式自定义

$(function(){ 
 
    $('.tabs li').hover(function(){ 
 
    //hover in 
 
     var index= $(this).index(); 
 
     $('.tabcontainer div').eq(index).show(500); 
 
    },function(){ 
 
    //hover out 
 
     $('.tabcontainer div').hide(500); 
 
    }); 
 
})

.tabcontainer{ 
 
    padding: 20px; 
 
} 
 
.tabcontainer div{ 
 
    display: none; 
 
    padding: 10px; 
 
    border: thin solid #ccc; 
 
} 
 
.tabs{ 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.tabs li{ 
 
    list-style: none; 
 
    padding: 10px; 
 
    display: inline-block; 
 
    cursor: pointer; 
 
} 
 
.tabs li:hover{ 
 
    background-color: #ccc; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="tabcontainer"> 
 
    <ul class="tabs"> 
 
     <li>Tab 1</li> 
 
     <li>Tab 2</li> 
 
     <li>Tab 3</li> 
 
     <li>Tab 4</li>  
 
    </ul> 
 
    <div>Tab 1 content</div> 
 
    <div>Tab 2 content</div> 
 
    <div>Tab 3 content</div> 
 
    <div>Tab 4 content</div> 
 
</div>