幻灯片菜单转换

Question

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

脚本是：

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

CSS过渡：

.cbp-spmenu {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;

}

如果有人对如何使幻灯片过渡平滑有任何想法或建议。 我有义务。

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

<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>

Answer 1

在$(document).ready(function( )尝试

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

要么

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

幻灯片菜单转换

问题描述

1 个解决方案

解决方案1
0 2013-06-23 08:39:59

幻灯片菜单转换

问题描述

1 个解决方案

解决方案1 0 2013-06-23 08:39:59

解决方案1
0 2013-06-23 08:39:59