Обратные вызовы не работают должным образом

Question

Я в растерянности.В этом коде #options должен постепенно исчезать, но это не так.Атрибуты CSS установлены.

$("#content > p").animate({ opacity: '0' }, function() {
    $(this).css("display", "none");
    $("#options").css("opacity", "0").show(0, function() {
        $("#options").fadeIn();
    });
});

Answer 1

Кажется, что это должно работать, но, очевидно, вам нужно будет использовать метод fadeTo() ^{[документы]} вместо fadeIn() ^{[документы]} метод.

$('img').css("opacity", 0).show(0,function() {
    $(this).fadeTo(400, 1);
});

---

Хотя show(0,func.. кажется здесь немного бессмысленным, когда вы могли бы просто сделать:

$('img').css("opacity", 0).show().fadeTo(400, 1);

... если только 0, который вы даете для продолжительности .show(), на самом деле не является переменной, которая может ссылаться на большее число.

Answer 2

opacity все еще устанавливается как 0.

Вы можете изменить fadeIn() на ...

$("#options").animate({ opacity: 1}, 500);

jsFiddle .

Answer 3

Вы можете значительно упростить свой код - помните, что при установке непрозрачности на 0 будет реплицирован атрибут visibility:hidden CSS, тогда как fadeOut() будет реплицировать атрибут display:none CSS. Единственное критическое различие между этими двумя заключается в том, что последний удалит элемент из визуализированного DOM, поэтому он не будет занимать место на экране, и окружающие узлы даже не будут знать, что он там. Первый из них создаст большое пустое поле, в котором элемент по-прежнему равен , но вы просто его не видите. Предполагая, что вы хотите использовать последний, который является наиболее распространенным, это должно работать:

$('#content > p').fadeOut('slow', function() {
    $('#options').fadeIn();
});