JQuery Fadein одновременно

Question

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

Как я могу это сделать? Прямо сейчас у меня это (в некоторой степени) работает, но несколько вещей не так с ним.

1. мгновенно исчезает
2. это не одновременно (я хочу, чтобы 1 исчезал, в то время как другой исчезал).

Примечание: я не могу просто исчезнуть в div, потому что во всей программе записывается #dialog, поэтому, если я сохраню там div.error, он будет просто перезаписан, поэтому мне нужно сделать это таким образом.

что у меня есть

$.ajax({
            type: "POST",
            url:  "/checkstatus/" + id,
            dataType: "html",
            error: function(data){
                $("#dialog").fadeOut();
                $("#dialog").hide().html("<img src='/img/deleted.jpg' alt='deleted'>")
                $("#dialog").fadeIn();
            }
        });

Answer 1

Вы не можете иметь один объект fadeOut и fadeIn одновременно - у объекта может быть только одно состояние за раз (оно либо исчезает, либо исчезает, но не оба).

Если вы действительно хотите этот визуальный эффект, вам понадобятся два отдельных объекта, один из которых исчезает, а другой постепенно исчезает. Например, именно так работают слайд-шоу, когда они затухают на одном изображении и одновременно исчезают. следующее изображение. Они фактически исчезают из одного объекта и исчезают из другого.

Итак, если вы действительно хотите, чтобы этот диалог одновременно визуально отображал эффект двойного затухания, вам понадобятся два диалоговых окна, одно исчезнет, ​​а другое исчезнет.

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

Если у вас были причины хотеть только одно диалоговое окно и хотеть одновременного затухания, то вы можете fadeOut () один блок содержимого в диалоговом окне и fadeIn другой блок содержимого. Вы должны поместить каждый блок содержимого в свой собственный div внутри одного и того же диалогового окна и затемнить один и другой. Вам придется вручную расположить оба div так, чтобы они были друг над другом (наложены друг на друга). Это возможно, но требует немного больше работы.

Answer 2

$.ajax({
    type: "POST",
    url:  "/checkstatus/" + id,
    dataType: "html",
    error: function(data){
        $("#dialog").fadeOut(function(){
             $("#dialog")
                .html("<img src='/img/deleted.jpg' alt='deleted'>")
                .fadeIn()
        });

    }
});