JQuery hover tabs

Question

I am trying to create simple jQuery tabs. The contents of the tab should be displayed on hover. Therefore, I am trying to use code. The problem is that if you type fast enough on the tab headers, you can still see the contents of other tabs before the correct tab contents are displayed.

Demo:

See the Fiddle link to see the problem: http://jsfiddle.net/0v9nhxu3/

The code:

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

Use stop()up fadeInto stop the current animation.

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;
    });
});

Demo Screenshot

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

Fast way and customizable

$(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>

Run codeHide result