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

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

    }
});

Answer 2

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

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

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

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

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