Question

我正在使用此代码：

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>slide demo</title>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
        <style>
            #toggle {
                width: 100px;
                height: 100px;
                background: #ccc;
            }
        </style>
        <script src="//code.jquery.com/jquery-1.10.2.js"></script>
        <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
    </head>
    <body>
        <p>Click anywhere to toggle the box.</p>
        <div id="toggle"></div>
        <script>
            $(document).click(function() {
                $("#toggle").toggle("slide");
            });
        </script>
    </body>
</html>

可在此处找到：http://api.jqueryui.com/slide-effect/ 我希望在加载页面时使用效果，而不是用户单击

我已经在我自己的页面上使用过它，在页面加载后我想在页面上滑动div。所以我这样做：

$(document).ready(function () {
    setTimeout( function() {
        $("#panel-1027").toggle("slide");
    }, 2000);
});

问题在于，div不是滑入，而是滑出页面。我怎么能这样做呢？

Answer 1

默认隐藏toggle元素，并为特定方向的切换添加方向

$(document).ready(function () {
    setTimeout( function() {
        $("#toggle").toggle("slide",{direction: 'up'});
    }, 2000);
});

JQuery的幻灯片效果

1 个答案: