Jquery FadeIn 和 FadeOut 难以相处答案

【问题标题】：Jquery FadeIn and FadeOut having difficulty getting alongJquery FadeIn 和 FadeOut 难以相处
【发布时间】：2011-12-26 18:49:50
【问题描述】：

我是 Jquery 的新手...我正在尝试一个简单的系统，如下所示...

http://jsfiddle.net/z7PaJ/

我想让所有可见元素淡出，然后根据选择的内容淡入适当的元素。我设法通过使用 fadeIn 和 fadeOut 覆盖脚本来使用 if/else 逻辑来了解可见的内容，因此 Jquery 将自行决定什么是可见的（也许这是一个问题？）。但最大的问题是元素在一切都消失之前就开始消失了。换句话说，一个元素将在所有其他元素都被隐藏之前决定它是否可见。

我知道我需要使用回调，但我所做的每一个测试都只会让情况变得更加复杂......这是最基本的例子。

谢谢！

【问题讨论】：

您到底想要什么？ this 之类的东西？

标签： javascript jquery callback fadein fadeout

【解决方案1】：

这是另一个版本：

 $("#all").addClass("highlight");

 $("#all, #m1, #m2, #m3").mouseover(function(){
    $("*").removeClass("highlight");
    $(this).addClass("highlight");
    var elm = 'n'+$(this).attr('id').substr(1);
    elm = elm=='nll' ? elm='ul li' : elm = $('.'+elm);
    $("ul li:visible").stop(true, true).fadeOut("slow", function() {
         $(elm).fadeIn("slow");
    });
});

还有一个修改过的小提琴：http://jsfiddle.net/adeneo/z7PaJ/23/

【讨论】：

这太棒了！正是我设想的使用类型......但看起来脚本取决于用数值命名的代码......对于css来说，拥有“真实”名称更实用......比如'#apple，#香蕉，#orange，而不是#1、#2、#3。我试图弄清楚如何让它在考虑到这一点的情况下工作，但是我缺少一些简单的东西吗？谢谢！！！！！！！！！！！！！！！！
@user962642 数字不应用作类或 ID 中的第一个“字母”，因为它可能会导致麻烦，尤其是在 XHTML 1.0 等较旧的文档类型中。所以我只是在 ID 中添加了一个“m”，因为我通常不喜欢为 ID 和类使用相同的名称，因为这样很容易忘记或混淆这些名称，所以我在类中添加了一个“n”并使用了“ substr' 删除一个字母，然后用另一个替换它。但是，对 ID 和类使用相同的名称并没有什么问题，这里有一个 FIDDLE 可以做到这一点，而且它可能更容易阅读。

【解决方案2】：

您需要在淡出完成后淡入。你可以用这样的回调来做到这一点：

$(".1").fadeOut(function(){
    $(".1").fadeIn();
});

【讨论】：

【解决方案3】：

您将希望在第一个动画完成后使用动画完成回调来启动一个动画。而且，这是一种更紧凑的方法（使用 cmets）来避免所有重复的代码并使用完成回调：

$(document).ready(function(){
    $("#masters span").mouseover(function() {
        // stop any existing animations and jump to ending state 
        // and save jQuery object for later use
        var items$ = $(".items li").stop(true, true);

        // highlight the current item only
        $("#masters span").removeClass("highlight");
        $(this).addClass("highlight");

        // check if we're on the "all" item
        if (this.id == "all") {
            items$.fadeIn("slow");
        } else {
            // fade out any items that are not already hidden and not our target
            // we eliminate items that are already hidden 
            //     so the callback won't fire immediately
            // visible target is elements with a class name that matches 
            //     the current element's id
            var target$ = $("." + this.id);
            var once = false;
            items$.not(target$).not(":hidden").fadeOut("slow", function() {
                // the callback will fire for each item that is animating
                // and we only want to start the fadeIn once
                // so we have a flag for making sure we only start it once
                if (!once) {
                    target$.fadeIn("slow");
                }
                once = true;
            });
        }
    });
});

或者没有 cmets 的精简版：

$(document).ready(function(){
    $("#masters span").mouseover(function() {
        var items$ = $(".items li").stop(true, true);
        $("#masters span").removeClass("highlight");
        $(this).addClass("highlight");
        if (this.id == "all") {
            items$.fadeIn("slow");
        } else {
            var target$ = $("." + this.id);
            var once = false;
            items$.not(target$).not(":hidden").fadeOut("slow", function() {
                if (!once) {target$.fadeIn("slow");}
                once = true;
            });
        }
    });
});

请参阅 the modified jsFiddle 以了解与此代码相关的 ID 和类名的一些更改并查看它是否正常工作。我使用一种方案，其中鼠标悬停的对象的 id 确定要显示的项目的类名。这允许单个代码为所有项目工作，而无需一遍又一遍地重复相同的代码。

注意：为了获得最佳的跨浏览器兼容性，ID 和类名不应以数字开头。

注意：此版本使用了几行额外的代码，以防止鼠标移出并返回同一项目时出现任何闪烁。

【讨论】：