Question

我尝试了很多代码，但是我得到了正确的输出，需要将animate类添加到jQuery中的以下代码中。我是jQuery的初学者

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

值得检查一下，看看你是否能够实现CSS后的优势。大多数问题与没有正确组织你的类和单位转换的某些问题（即颜色：红色到任何rgba值）有关。另外，请考虑windows.width类的@media CSS查询：

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

为jQuery添加动画

1 个答案: