Fatal编程技术网

Javascript 幻灯片菜单转换

javascript css

Javascript 幻灯片菜单转换,javascript,css,slider,transition,Javascript,Css,Slider,Transition,我在菜单上有一张左边的幻灯片。当我加载页面时，它会自动设置动画并“滑入”。我的转换速度在CSS中设置。问题在于调用函数（见下文）的转换非常不平滑。如果我在之后添加一个速度（300）。单击它根本不起作用 剧本是： <script> $(document).ready(function() { $('#showLeft').click(); });</script> } 如果有人对如何使幻灯片过渡顺利有任何想法或建议。我将不胜感激

我在菜单上有一张左边的幻灯片。当我加载页面时，它会自动设置动画并“滑入”。我的转换速度在CSS中设置。问题在于调用函数（见下文）的转换非常不平滑。如果我在之后添加一个速度（300）。单击它根本不起作用

剧本是：

    <script>
    $(document).ready(function() {
       $('#showLeft').click();
       });</script>
}

如果有人对如何使幻灯片过渡顺利有任何想法或建议。我将不胜感激

Javascript:

//slidemenu.js 
var menuLeft = document.getElementById( 'cbp-spmenu-s1' ),
            showLeft = document.getElementById( 'showLeft' ),
            body = document.body;

        showLeft.onclick = function() {
            classie.toggle( this, 'active' );
            classie.toggle( menuLeft, 'cbp-spmenu-open' );
            disableOther( 'showLeft' );
        };
        function disableOther( button ) {
            if( button !== 'showLeft' ) {
                classie.toggle( showLeft, 'disabled' );
            }
        }
HTML



    

  • 

      

    • 

    • 

    • 

    

    • 

  • 

  • 

  • 

  •
在
$（文档）中尝试此操作。就绪（函数（）

或

//slidemenu.js 
var menuLeft = document.getElementById( 'cbp-spmenu-s1' ),
            showLeft = document.getElementById( 'showLeft' ),
            body = document.body;

        showLeft.onclick = function() {
            classie.toggle( this, 'active' );
            classie.toggle( menuLeft, 'cbp-spmenu-open' );
            disableOther( 'showLeft' );
        };
        function disableOther( button ) {
            if( button !== 'showLeft' ) {
                classie.toggle( showLeft, 'disabled' );
            }
        }

<body class="cbp-spmenu-push">

<!-- Side Menu -->

<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s1">
    <button id="showLeft" class="menuOpen"><i class="icon-reorder icon-small"></i></button>
    <div class="side-panel-top"><a href="index.html" id="logo"><img src="images/backgrounds/logo.png"></a></div>
    <ul class="sidemenu">
        <li><a href="#">Twitter<i class="icon-chevron-right icon-small"></i></a>
            <ul class="sidesub">
                <li><a href="#">Twitter</a></li>
                <li><a href="#">Read</a></li>
                <li><a href="#">Twitter</a></li>
            </ul>
        </li>
        <li><a href="#">Github<i class="icon-chevron-right icon-small"></i></a></li>
        <li><a href="#">Facebook<i class="icon-chevron-right icon-small"></i></a></li>
        <li><a href="#">Github<i class="icon-chevron-right icon-small"></i></a></li>
        <li><a href="#">Facebook<i class="icon-chevron-right icon-small"></i></a></li>
    </ul>
</nav>

$("#id want to slide").animate({left:'-200px'});

 $("#id u want to slide").css({left:'-200px'});