Css转换不适用于jquery

时间:2014-11-21 09:22:42

标签: jquery html css

我正在尝试左转小节隐藏/显示过渡。这是我的代码:

的JQuery:

$("[data-toggle='offcanvas']").click(function(e) {
    e.preventDefault();
    $('.left-side').toggleClass("collapse-left");
});

CSS:

.left-side.collapse-left {
    left: -220px;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

HTML:

<aside class="left-side sidebar-offcanvas">
    <!-- my content-->
</aside>

2 个答案:

答案 0 :(得分:1)

首先,css left属性对正常流中的元素没有影响。您应该通过设置 static 以外的位置属性值来定位元素,以便left生效。

其次,转换从一个值发生到另一个值。因此,如果您希望看到转换,请设置默认值,例如left:0

最后,如果您希望元素在删除它时设置动画,则不应在要切换的类中添加transition属性,而是使用静态选择器设置它。


&#13;
&#13;
$("#click").click(function(e) {
  e.preventDefault();
  $('.left-side').toggleClass("collapse-left");
});
&#13;
.left-side {
  position: relative;
  left: 0;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -ms-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}
.left-side.collapse-left {
  left: -220px;
}
div {
  min-height: 200px;
  max-width: 200px;
  background: #06F;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="click">click</button>
<aside class="left-side sidebar-offcanvas">
  <div>This is test</div>
</aside>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

你的意思是这样吗?

http://jsfiddle.net/99o4k67f/1/

$("#click").click(function(e) {
    e.preventDefault();
    $('.left-side').toggle('slow');
});

或更像这样:

http://jsfiddle.net/99o4k67f/2/

$("#click").click(function(e) {
    e.preventDefault();
    $('.left-side').animate({width:'toggle'},900);
});
是的,你不需要任何css:)