代码之家 › 专栏 › 技术社区 › Jnsn_

jQuery toggleClass速度在向后切换时不会向后滑动

toggleclass jquery-ui jquery

Jnsn_ · 技术社区 · 9 年前

我有下面的jquery代码,可以让div从左向右滑动,但再次单击时,它会立即返回到原始位置(左),而没有幻灯片动画。不确定我在这里做错了什么。

$('#box').click(function(){
    $(this).toggleClass("slideOut", 500, 'easeInQuad');
});

HTML:

<style>
    #box{
        position: fixed;
        left:-380px;
    }
    .slideOut{
        position: fixed;
        left:0 !important;
    }
</style>

<div id="box">
    ...
</div>

2 回复 | 直到 9 年前

Vixed 9 年前

如果您使用的是jQuery UI,那么 您的代码运行良好 ,只需删除 !重要的 从你的css。

JAVASCRIPT语言

$('#box').click(function(){
    $(this).toggleClass("slideOut", 500, 'easeInQuad');
});

CSS公司

   #box{
        position: fixed;
        left:-380px;
    }
    #box.slideOut{
        left:0;
    }

https://jsfiddle.net/n72z2ym0/

smdsgn 9 年前

这就是 toggleClass() 方法工作: .toggleClass( className )
See the documentation

也就是说,如果你想用这个方法动画你的div,你需要像这样处理CSS3转换:

$(document).ready(function(){
  $("#slideButton").click(function(){
      $(".box").toggleClass("slideOut");
  });
});

.box{
    width: 380px;
    height: 380px;
    background: red;
    position: fixed;
    left:-380px;
    top: 40px;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
}
.slideOut{
    left: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button type="button" id="slideButton">SlideToggle</button>
<div class="box"></div>

推荐文章

Newbie_Coder · 如何使用Jquery无画布裁剪框架

1 年前

usman610 · Javascript代码在点击回车键和点击按钮时删除行

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Carly · 在页面加载时滑入div,然后单击以滑入和滑出(jQuery)

1 年前

Community wiki · jquery弹出窗口不会用按键关闭,但会点击

1 年前

Community wiki · Smarty IE9请求下载index.php文件(在上传未发生后)?是我的代码出错还是activecollab?

1 年前

Community wiki · 无法从jquery文档调用函数

1 年前

marzouk najib · Uncaught ReferenceError:未定义FullCalendar

2 年前

Pepe · 检查“data”属性是否包含输入值的一部分(jQuery)

2 年前

laurence keith albano · 如何使用Jquery在父类内添加子父类

2 年前