Как анимировать "visibility: hidden"?

вот моя проблема... Вы можете мне помочь?

$(".button").hover(function(){
  $('.class').css({opacity: 1.0, visibility: "hidden"}).animate({opacity: 0}, 1200);
},function(){
  $('.class').css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1}, 1200);
});

он оживляет только тогда, когда появляется. :-(

7
css html jquery jquery-animate visibility

6 ответов

попробуйте так:

$(".button").hover(function(){
  $('.class').css("opacity", "1.0").animate({opacity: 0}, 1200, function(){
    $('.class').css("visibility", "hidden");
});
},function(){
  $('.class').css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1}, 1200);
});

однако это не лучший вариант для fadeIn и fadeOut. Вместо этого вы можете использовать методы с теми именами, которые предоставляет jQuery, или лучше использовать CSS-переходы, если сможете.

4
$(".button").hover(function(){
    $('.class').css({opacity: 1.0, visibility: "visible"}).animate( //start off from opacity 1 and visibile
        {opacity: 0}, //then animate opacity to 0
        1200, 
        function(){ //this will be run after the animation is completed
            $(this).css({
                visiblity:"hidden" //so it will be hidden only after the animation has completed
            });
        }
    );
},function(){
  $('.class').css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1}, 1200);
});
1

свойство visibility в CSS является логическим, включено или выключено.

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

для такого простого эффекта, как этот, a переход лучше пожалуйста, см. скрипку здесь. Используйте javascript только для добавление / удаление классов, запускающих переход

.hidden {
    opacity: 0;
    transition: opacity 0.5s ease-in;
}

.show-me {
    opacity: 1;
}

вы устанавливаете свойство transition, определяющее свойство transition, затем длину, функцию ease для использования (которая описывает изменения скорости, с которой анимация имеет эффект). Вам также нужно определить начальную и конечную точки для вашего анимированного свойства, как вы можете видеть с двумя значениями непрозрачности.

для записи-ключевой кадр подходит, если ваш эффект был более сложным, например, желая его свойство полностью анимировать на полпути, а затем анимировать обратно, в то время как другой занимает все время или для колебаний; и jQuery animate предоставляет простой способ действовать на заключение анимации, которая также иногда необходима.

1

использовать fadeIn/затухание

$(".button").hover(function(){
  $('.class').fadeOut(1200);
},function(){
  $('.class').fadeIn(1200);
});

Вы можете пройти в duration, который должен достичь ваших целей

0

зачем использовать jQuery для этого? Гораздо эффективнее использовать CSS, например:

.fade {
  width:100px;
  height:100px;
  background-color:darkgray;
  opacity: 1;
  transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
}

.fade:hover {
  opacity: 0;
}
<div class="fade"></div>
0

это потому, что он удаляется до того, как он оживит кулачок. Сначала вам нужно будет анимировать fade out, а затем применить visibility: hidden после завершения анимации.

есть несколько способов сделать это: браузер вызывает событие animationend (это prexied для различных браузеров-см. здесь для получения дополнительной информации), или вы можете использовать анимации лучше библиотека, чем в jQuery анимировать (как зеленый носок TweenLite -- http://greensock.com/tweenlite), чтобы справиться с анимации, которая делает тривиальным выполнение кода в конце анимации.

0