Question

我是Jquery的新手...我正在尝试使用如下所示的简单系统......

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

我可以告诉我需要使用回调，但我所做的每一项测试都只会使情况更加复杂......这是最基本的例子。

谢谢！

Answer 1

fadeOut完成后你想要淡出。您可以使用回调来执行此操作：

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

Answer 2

您将需要使用动画完成回调来在第一个动画完成后启动一个动画。而且，这是一个更紧凑的方式（带注释）来避免所有重复的代码并使用完成回调：

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

或没有评论的紧凑版本：

$(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和类名称不应以数字开头。

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

Answer 3

这是另一个版本：

 $("#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/

Jquery FadeIn和FadeOut很难相处

3 个答案: