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>