0

我在菜单中有一个左幻灯片。当我加载页面时，它会自动设置动画并“滑入”。我的过渡速度在 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>
4

1 回答 1

0

在里面试试这个 $(document).ready(function( ) 

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

或者

 $("#id u want to slide").css({left:'-200px'});
于 2013-06-23T08:39:59.903 回答