如何在頁面加載時隱藏圖像，然后在一段時間后像滑動一樣顯示

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/

s

 $(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);