Jquery FadeIn и FadeOut с трудом ладят

Question

Я новичок в Jquery ... Я пытаюсь создать простую систему, как показано ниже ...

http://jsfiddle.net/z7PaJ/

Я хочу, чтобы все видимые элементы исчезали, а затем соответствующие элементы появлялись в зависимости от того, что было выбрано. Мне удалось обойти, используя логику if / else о том, что видно, просто скрыв скрипт с помощью fadeIn и fadeOut, поэтому Jquery сам решит, что видно (возможно, это проблема?). НО самая большая проблема состоит в том, что элементы начинают исчезать прежде, чем все исчезнет. Другими словами, элемент определит свою видимость до того, как все остальные элементы будут скрыты.

Я могу сказать, что мне нужно использовать обратные вызовы, но каждый мой тест только усложнял ситуацию ... вот самый простой пример.

Спасибо!

Answer 1

Вы захотите использовать обратный вызов для завершения анимации, чтобы запустить одну анимацию после окончания первой.И вот гораздо более компактный способ (с комментариями) сделать это, чтобы избежать повторного кода и использовать обратный вызов завершения:

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

См. измененный jsFiddle для нескольких изменений идентификаторов и имен классов, которые идут с этим кодом, и чтобы увидеть, как он работает.Я использую схему, в которой идентификатор объекта, над которым курсор мыши находится, определяет имя класса отображаемых элементов.Это позволяет одному коду работать со всеми элементами без необходимости повторять один и тот же код снова и снова.

Примечание. Для лучшей кросс-браузерной совместимости идентификаторы и имена классов не должны начинаться с цифры..

Примечание: эта версия использует несколько дополнительных строк кода, чтобы избежать появления вспышки при наведении мыши и возвращении в тот же элемент.

Answer 2

Вот еще одна версия:

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

Answer 3

Вы захотите появиться после того, как исчезнет fadeOut.Вы можете сделать это с помощью обратного вызова как такового:

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