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

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

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/

jQuery悬停选项卡

2 个答案: