Question

我在写这些标签时遇到问题。它们似乎工作得很好，但如果鼠标快速超过它们，元素就会开始堆叠。我不明白为什么会发生这种情况，因为下一个元素的淡入只会在第一个元素触发其淡出结束时发生？标签可以在这里找到：

http://artmodish.com/ithos/Content/us.php

$(document).ready(function(){
$('#info-tabs .inner:first').fadeIn(200);
$('#info-tabs li:first').addClass('current-tab');

$('#info-tabs li').stop().mouseover(function(){
    var current = $(this);
    $('#info-tabs li').each(function(){
        $(this).removeClass('current-tab');
    });
    current.addClass('current-tab');

    $('#info-tabs .inner').each(function (){
        var thisInner = $(this);
        if(thisInner.attr('id')==current.attr('id')) {
            $('#info-tabs div div').filter(':visible').fadeOut(500,function(){
                thisInner.fadeIn(200);
            });
        }
    });
});
});

Answer 1

问题是设置current和使用它之间的延迟。如果将鼠标移动到500ms动画中的另一个选项卡上，则将调用该处理程序两次（具有current的不同值）并将显示两个选项卡的内容。

一种简单的方法是将current转换为全局变量，这样当所有动画完成第1部分时，它们将显示相同的选项卡（最后一个选项）。

$(function ()
{
    var current;

    $('#info-tabs .inner:first').fadeIn(200);
    $('#info-tabs li:first').addClass('current-tab');

    $('#info-tabs li').mouseover(function ()
    {
        current = $(this);
        $("#info-tabs li").removeClass("current-tab");
        current.addClass("current-tab");
        $("#info-tabs .inner:visible").fadeOut(500, function () { $("#info-tabs .inner#" + current.attr("id")).fadeIn(200); });
    });
});

但这并不理想，因为你最终得到了一个不需要的“全局”变量，并且可以构建一个大型动画队列（我通过一些疯狂的鼠标移动得到了9）。

我通过在mouseover处理程序的开头清除队列（并设置它来完成动画）来解决这个问题。这种方式有效（最终结果还可以），但它确实会给出一些不幸的内容。嗯。（我不得不将fadeIn移出fadeOut，所以我可以保证它会在停止时完成。）

$(function ()
{

    $('#info-tabs .inner:first').fadeIn(200);
    $('#info-tabs li:first').addClass('current-tab');

    $('#info-tabs li').mouseover(function ()
    {
        var current =  $(this);

        $("#info-tabs *").stop(true, true);    
        $("#info-tabs li").removeClass("current-tab");
        current.addClass("current-tab");
        $("#info-tabs .inner:visible").fadeOut(500);
        $("#info-tabs .inner#" + current.attr("id")).delay(500).fadeIn(200);
    });
});

（同时删除了每次调用，因为它们并非真正必要。）

jQuery选项卡淡入淡出堆叠问题

1 个答案: