Question

我继承了一些代码，这些代码在两个css状态之一中显示一个侧边栏，为

class = 'closed';

，或者

class = 'open';

逻辑是它正在打开和关闭

display: none;

我现在的任务是使用幻灯片效果，而不仅仅是直接显示开/关;

考虑到先前的逻辑是类名的简单更改，我试图考虑如何重新连接它，以便存在与该点击相关联的某种幻灯片切换。

关于如何实现这一点的任何想法，考虑到围绕这些类状态建立了先前的基础设施，我希望完全避免捣乱。

编辑：我应该澄清，我对JQuery及其动画功能一般都很熟悉，但我想知道他们是否可以使用自定义的开/关开关生活在同一个空间中，是否有2个影响可见性的功能是不好的做法< / p>

Answer 1

jQuery有一个执行此操作的slidetoggle方法。

http://api.jquery.com/slidetoggle/

Answer 2

你可以使用jQuery为你做这件事。有slideDown slideUp和slideToggle可用。您还可以使用css3属性并只切换类。

jQuery方法 http://jsfiddle.net/zapcfd0k/

$('#sidebar').slideToggle();

CSS3和纯JavaScript http://jsfiddle.net/9q5beqh8/

#sidebar {
    background-color: #4679BD;
    height: 500px;
}
.open {
    width: 200px;
    transition: width 500ms;
}
.closed {
    width: 0;
    transition: width 500ms;
}

setInterval(function () {
  toggleSideMenu();
}, 3000);

function toggleSideMenu() {
    var sideBar = document.querySelector('#sidebar');
    var className = sideBar.className || 'open';
    if (className === 'open') 
        sideBar.className = 'closed';
    else 
        sideBar.className = 'open';
}

单击操作在“关闭”之间切换班级时滑动切换。并且＆＃39;打开＆＃39;

2 个答案: