jQuery css Видимость с анимацией

Question

У меня есть несколько div'ов, расположенных друг под другом, и я использую видимость css для их постепенного исчезновения.Причина, по которой я использую видимость, заключается в том, что div не перемещается.

Для Fade In я использую:

$('.drop1').css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1.0});

, а для Fade Out я использую:

$('.drop1').css({opacity: 0.0, visibility: "hidden"}).animate({opacity: 1.0})}, 200);

FadeIn работает , но fadeOut не работает .

Теперь вы можете подумать, что проблема последняя ', 200 ', но мне нужно будет использовать это как задержку, поскольку fadeout / visibility: hidden находится на событии mouseleave после 200 мс.

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

Большое спасибо

Answer 1

$('.drop1').css({opacity: 1.0, visibility: "visible"}).animate({opacity: 0}, 200);

Answer 2

зачем делать это так сложно, вместо анимации CSS, вы можете использовать функцию затухания по умолчанию

$('.drop1').fadeIn(200);
$('.drop1').fadeOut(200);

edit

, если вы хотите затухатьэто без потери высоты.Вы можете использовать fadeTo (длительность, непрозрачность, [обратный вызов]);

$('.drop1').fadeTo(200, 0);

проверьте этот пример: http://jsfiddle.net/ufLwy/1/

Answer 3

У меня были похожие проблемы, и вот что я в итоге сделал.

$.fadeToHidden = function ( selector, duration, complete ) {
    $.when(
        $( selector ).fadeTo( duration, 0 )
    ).done( function(){
        $( selector ).css('visibility', 'hidden')
        complete();
    });
}

Причина, по которой я это сделал, в том, что

1. fadeIn () / fadeOut () использует 'display', который F увеличивает высоту элемента
2. fadeTo не влияет на «видимость», поэтому, хотя элемент визуально скрыт с непрозрачностью: 0 пользователи по-прежнему могут взаимодействовать (т.е. щелкать) с невидимым элементом
3. animate () является асинхронным, поэтому создание цепочки CSS в конце не гарантирует ее запуска после завершения анимации. Только при использовании Отложенного объекта, который возвращают анимации ($ .when () / $ .done ()), вы гарантированно примените CSS после всех анимаций завершенных.

EDIT В качестве альтернативы, вы можете применить «видимость: скрытый» к каждому отдельному элементу после завершения соответствующей анимации. Это может быть немного быстрее для выбора больших групп элементов, поскольку вы запрашиваете DOM для группы элементов только один раз.

$.fadeToHidden = function ( selector, duration, complete ) {
    $.when(
        $( selector ).fadeTo( duration, 0 , function(){ 
            $(this).css('visibility', 'hidden');
        } )
    ).done( complete );
}

Answer 4

У меня была похожая проблема, и я решил ее следующим образом:

Чтобы исчезнуть:

$("#id").css({visibility:"visible", opacity: 0.0}).animate({opacity: 1.0},200);

Чтобы исчезнуть:

$("#id").animate({opacity: 0.0}, 200, function(){
    $("#"+txtid).css("visibility","hidden");
});

Как можновидите, я скрываю div "#id" после завершения анимации.Надеюсь, еще не поздно

Answer 5

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

$(".drop1").css("visibility", "visible").show().fadeOut(5000);

Answer 6

.drop1{ opacity: 0.0; }

$('.drop1').fadeTo( "slow" , 1.0);