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); 
});