2014-12-04 3 views
-1

я играл с этим кодом:слайд эффект JQuery в

<!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 перемещается со страницы. Как я могу это сделать?

+2

Установите панель на 'дисплей: hidden' по умолчанию. –

+0

создайте скрипку, чтобы мы могли ее попробовать – Uiupdates

ответ

1

скрыть свой toggle элемент по умолчанию и добавить направление к вашему тумблер для конкретного направления

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