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 个答案: