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

У меня есть несколько 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", но мне нужно будет использовать это как задержку с момента затухания/видимости: hidden находится на событии mouseleave после 200 мс.

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

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

Ответ 1

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

Ответ 2

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

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

изменить

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

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

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

Ответ 3

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

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

Я сделал это потому, что

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

ИЗМЕНИТЬ В качестве альтернативы вы можете применить к "видимость: скрытый" для каждого отдельного элемента после завершения их соответствующей анимации. Это может быть немного быстрее для выбора больших групп элементов, поскольку вы только один раз запрашиваете DOM для группы элементов.

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

Ответ 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" после окончания анимации. Я надеюсь, что это не слишком поздно.

Ответ 5

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

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

Ответ 6

.drop1{ opacity: 0.0; }

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