Question

我尝试了很多代码，但我得到了正确的输出，需要在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); 
});