javascript - 如何在页面加载时隐藏图像，然后在一段时间后像滑动一样显示

Question

我有网页我希望在页面加载一段时间后它会滑动图像而无需任何点击我正在使用以下代码它会在按钮单击时滑动但也会在页面加载时显示图像但我想在页面加载一段时间后滑动最初应该隐藏图像

下面是完成的演示链接

http://jsfiddle.net/WM5tA/2/

Answer 1

在用于文档就绪函数的 JavaScript 中，设置调用幻灯片代码的超时（以毫秒为单位），在页面加载后您希望在调用函数进行幻灯片之前等待多长时间。例如等待一秒钟：

 $(document).ready(function() {
            setTimeout(function () { $(".imageone, .imagetwo").slideToggle(); },1000);
 });

http://jsfiddle.net/vdgDB/1/

Answer 2

提取您的函数并在 setTimeout 和单击处理程序中调用它：

http://jsfiddle.net/WM5tA/4/

JS

 $(document).ready(function() {
        setTimeout(slideAround, 5000); // Toggles the slide after 5 seconds      
        $("input[type=button]").click(slideAround);
        });

 function slideAround() {
        $(".imageone, .imagetwo").slideToggle();
   }

更新

要在超时时显示 div 而不是隐藏它们，只需将元素设置为 display:none; 在你的 CSS 中。

http://jsfiddle.net/WM5tA/6/

CSS

.imageone, .imagetwo
            {
                [...]
                display:none;
            }

更新 2

要从右向左滑动你的元素，你需要像这样使用 jQuery UI：

http://jsfiddle.net/WM5tA/7/

$(".imageone, .imagetwo").show("slide",{direction: "right"}, 1000);