Анимация при удалении класса jquery?

Question

[denidip]

Что то не получается нагуглить простой пример, может что ввожу не так, в общем есть выезжающая панелька:

$(document).ready(function(){
      $panel = $("#panel");
      $menu = $("#menu");
      $menu.mouseover(function(){
        $panel.addClass("qqw");
      });
      $panel.mouseover(function(){
        $panel.removeClass("qqw");
      });
    });

CSS:

.qqw {
  transform: translate3d(206px, 0px, 0px)!important;
  -webkit-transform: translate3d(206px, 0px, 0px)!important;
  transition: -webkit-transform 700ms, transform 700ms;
}

Классу qqw назначен транзишн поэтому появляется все плавно и красиво, а вот как правильно скрывать панельку чтобы также применялся транзишн, подскажите конструкцию? Вообще есть идея писать транзишен в инлайн, и менять на другой класс, но что то пока не очень получилось((

Answer 1

[Nikolay Talanov]

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

.panel {
  transition: transform 0.7s;
}

Comments

[Денис Инешин]

+1, все остальные советы фигня

[denidip]

Сам пришел к этому решению установил нулевые значения трансформ'у и кинул транзишен в сам клас с панелькой, так что вы правы спасибо)))

Answer 2

[65536]

Господа, формулируйте свои вопросы понятно. Давайте нужную инфу, не давайте не нужную. Куда уезжает панелька, вверх, вбок, к бабушке? при каких обстоятельствах? На джквери или цсс все-таки? А ну да, у вас же класс qqw, сразу не увидел, это всё проясняет.

может вам надо что-то типа

$("#panelka").bind("mouseout", function() {
    $(this).slideUp(200);
});

Comments

[denidip]

Каюсь поправил запись, а по поводу класса, уж не держите меня за имбицила, естественно к релизу все поменяю как полагается... а по делу интересует как использовать именно transition: -webkit-transform 700ms, transform 700ms; для анимации.

[65536]

denidip: я не про то что у него имя беспонтовое, а про то, что оно ни о чем не говорит. просто в вопросах обычно выкладывают свой код как есть, в котором в рамках вопроса куча лишнего, или рассказывают какие-то совсем не понятные вещи вне контекста своего и своими терминами космическими. нужно оставлять только то что нужно в рамках вопроса, то что не нужно только мешает и запутывает. (это я не вам всё)

допишите как есть jsfiddle.net/crv145ua

Answer 3

[mr_dev1l]

Появляется при наведении или по клику?
Если при наведении, то попробуйте так:

$menu.mouseover(function(){
$panel.toggleClass( "qqw", 1000, "easeOutSine" );
});

Comments

[denidip]

При наведении... почему то не вставился код.

[denidip]

Отредактировал запись посмотрите пожалуйста выше, интересует как именно применить transition: -webkit-transform 700ms, transform 700ms; для анимации...