Добавление анимации в jQuery

Question

Я пробовал много кодов, но я получаю правильный вывод, который я ожидаю, нужно добавить класс animate в следующий код в jQuery. Я новичок в JQuery

http://7revolution.com/captain/captain/empty.php

$(function() { 
 
    "use strict"; 
 

 
    //Enable sidebar toggle 
 
    $("[data-toggle='offcanvas']").click(function(e) { 
 
     e.preventDefault(); 
 

 
     //If window is small enough, enable sidebar push menu 
 
     if ($(window).width() <= 992) { 
 
      $('.row-offcanvas').toggleClass('active', 1000); 
 
      $('.left-side').removeClass("collapse-left", 1000); 
 
      $(".right-side").removeClass("strech", 1000); 
 
      $('.row-offcanvas').toggleClass("relative", 1000); 
 
     } else { 
 
      //Else, enable content streching 
 
      $('.left-side').toggleClass("collapse-left", 1000); 
 
      $(".right-side").toggleClass("strech", 1000); 
 
     } 
 
    });

right-side, .left-side { 
 
    min-height: 100%; 
 
    display: block; 
 
} 
 
/*right side - contins main content*/ 
 
.right-side { 
 
    background-color: #f9f9f9; 
 
    margin-left: 220px; 
 
} 
 
/*left side - contains sidebar*/ 
 
.left-side { 
 
    position: absolute; 
 
    width: 220px; 
 
    top: 0; 
 
} 
 

 
.left-side.collapse-left { 
 
    left: -220px; 
 
} 
 

 

 
.right-side.strech { 
 
    margin-left: 0; 
 
} 
 

 
.right-side.strech > .content-header { 
 
    margin-top: 0px; 
 
} 
 

 

 

 
.row-offcanvas-right .sidebar-offcanvas { 
 
    right: -220px; 
 
} 
 
.row-offcanvas-left .sidebar-offcanvas { 
 
    left: -220px; 
 
} 
 
.row-offcanvas-right.active { 
 
    right: 220px; 
 
} 
 
.row-offcanvas-left.active { 
 
    left: 220px; 
 
} 
 

 
body.fixed .row-offcanvas-left.active .navbar { 
 
    left: 220px !important; 
 
    right: 0; 
 
} 
 
body.fixed .row-offcanvas-left.active .sidebar-offcanvas { 
 
    left: 0px; 
 
}

<a href="#" class="navbar-btn sidebar-toggle" data-toggle="offcanvas" role="button"> 
 
        <span class="sr-only">Toggle navigation</span> 
 
        <i class="el-icon-braille"></i> 
 
       </a> 
 

 
    <aside class="left-side sidebar-offcanvas"> 
 
     <br/><br/> <!-- only to run perfectly in stackoverflow.com --> 
 
     some left side content 
 
     </aside> 
 
<aside class="right-side"> 
 
some right side content 
 
</aside>

Answer 1

Ну стоит проверить, чтобы увидеть, если вы можете добиться того, что вы после того, как с CSS tansitions. Большинство проблем с чем-то связаны не с организацией ваших классов должным образом и с определенными проблемами, связанными с преобразованием единиц (т. Е. Цвет: красный для любого значения rgba). Кроме того, рассмотрим @media CSS запрос для window.width классов:

@media (min-width: 992px){ 
    //wider screen styles here 
} 

@media (max-width: 991px){ 
    //narrower screen styles 
} 

Трудно знать, с какой-либо информации класса, но посмотрим на сломанной JQuery toggleClass например here Пожалуйста, обратите внимание, что я бы не рекомендовал используя селектор #id здесь, я показываю его только как пример потенциального источника проблем!

CSS

#button { 
    width: 300px;/*#id selector more specific needs to be explicitly overridden by the toggled class.*/ 
    height: 200px; 
    border: 2px solid black; 
    background-color: rgba(122,122,122, 0.4); 
} 

.clicked { 
    width: 10em; /*change this to !important to see the correct change*/ 
    height: 20em !important; /* unit conversion OK */ 
    background-color: red; /* unit conversion not OK */ 
} 

и JS

$('#button').on('click', function(){ 
    $(this).toggleClass('clicked', 1000); 
});