jquery - 侧边菜单切换过渡效果？

Question

我正在使用 Phonegap 设计一个应用程序，它允许我使用 HTML5、CSS3 和 JS 进行编码。我创建了一个切换菜单，当点击它时会显示和隐藏自己。这是通过添加“display: none”和“display: inline-block”属性来实现的。我已经阅读了其他回复如何向此类属性添加过渡的帖子。我的问题是我完全迷失了我需要添加 CSS 属性的地方，因为我的 .css 文件和我的 HTML 文件中的脚本标记。有什么想法吗？ :)

这是我的代码:

/* This script is written in my HTML file inside a <script> tag*/

/* My JS */
            function openSlideMenu() {
                $('#side-menu').css({"display": "inline-block"});
            }

            function closeSlideMenu() {

                $('#side-menu').css('display','none');

            }

        $(document).ready(function() {

        });

        app.initialize();

.side-nav {
	box-sizing: border-box;
	z-index: 6000;
	position: absolute;
	height: 100vh;
	width: 70%;
	background-color: #7b66db;
    background-image: -moz-linear-gradient(135deg, #7b66db 4%, #9673fb 100%);
    background-image: -webkit-linear-gradient(135deg, #7b66db 4%, #9673fb 100%);
    background-image: linear-gradient(135deg, #7b66db 0%, #9673fb 100%);
    -webkit-box-shadow: 4px 0px 10px -2px rgba(0,0,0,0.49);
	-moz-box-shadow: 4px 0px 10px -2px rgba(0,0,0,0.49);
	box-shadow: 4px 0px 10px -2px rgba(0,0,0,0.49);
}

<!-- MY IMAGES WON'T SHOW BECAUSE I HAVE THEM IN MY LOCAL FILES. THE IMAGE THAT SHOULD SHOW IS AN "X" ICON FOR CLOSE. -->

<!-- Side Nav Menu -->
        <div class="side-nav" id="side-menu">
            <div class="top-bar">
  
                <div class="vpay-logo-div">
                    <a href="#">
                        <img src="img/vpay-logo.png" class="vpay-logo" alt="Brand Logo">
                    </a>
                </div>
                <div class="close-icon-div">
                    <a href="#" class="btn-close" onclick="closeSlideMenu()">              
                      <img src="img/close-icon.png" class="close-icon-nav" alt="Close Icon">
                    </a>
                </div>
            </div>
            <nav>
                <ul>
                  <li>List item</li>
                </ul>
            </nav>
        </div>
        <!-- /Side Nav Menu -->

Answer 1

我真的不知道如何使用 Phonegap 创建应用程序，但如果你像我看到的那样使用 Jquery，你可以将切换功能 documentation here当你点击按钮时

$(document).ready(function() {
   $('#button-open-and-close-menu').click(function(){
       $('#side-menu').toggle(200);
   });
});

您也可以使用动画功能制作它 documentation here从左边做出类似幻灯片的效果

$(document).ready(function() {
   $('#button-open-and-close-menu').click(function(){
        $('#side-menu').animate({width:'toggle',marginLeft:'0'},300);
   });
});
//CSS
#side-menu {
   margin-left : -100%;
}