Как анимировать div на и вне экрана с полем, используя jQuery? - PullRequest
Новая
       4

Как анимировать div на и вне экрана с полем, используя jQuery?

1 голос
/ 05 мая 2011

Я хочу, чтобы div скользил внизу снизу экрана после загрузки контента, а затем, когда пользователь нажимает кнопку меню, я хочу, чтобы div скользил вверх за пределы экрана.

НО

, когда он скользит вверх, я хочу, чтобы он появлялся не в самой нижней части экрана, а, скажем, в 100px над нижней частью экрана - и когда он скользит вверх за экраном, я хочу, чтобы он начал исчезать около На 100 пикселей ниже верхнего края экрана.

Я использую этот код: 

<script type="text/javascript">  
$(window).load(function(){


  $('#content').animate({top: "150px"}, 2000); <!-- to make the #content div slide in -->
  $('body').css('overflow', 'hidden'); <!-- to remove the sidebar -->


$('#navButton').click(function() {
$('#content').animate({top: "-500px"}, 750); <!-- to make the #content div slide out on click -->

});

Что я могу добавить / изменить для достижения желаемого эффекта?

Буду признателен за небольшой совет.

Ответы [ 2 ]

1 голос
/ 05 мая 2011

Вместо использования «Тела» в качестве скрытого контейнера для переполнения поместите ваше меню в новый элемент div с атрибутом «скрытый переполнение» и полями, на которых вы хотите, чтобы содержимое исчезло.

Вот запрашиваемый пример кода; 

<body>
<div id="container" style="overflow:hidden;height:90%;border: #000000 1px solid; margin:20px 0px;">
<input type='button' id='navButton' name="navButton" value="test" />
 <div id="content" style="position:relative;">
   1<br>
   2<br>
   4<br>
   5<br>
 </div>
</div>

<script type="text/javascript">
$(document).ready(function(){
 $('#content').animate({top: "150px"}, 2000);

 $('#navButton').click(function() {
  $('#content').animate({top: "-500px"}, 750);
 });
});
</script>

0 голосов
/ 05 мая 2011

Аналогично предложению Роберта, что-то вроде этого может работать, если вам не нужно, чтобы содержимое на экране было неразрешимым, пока div:

http://jsfiddle.net/EUL7v/

У вас в основном есть абсолютно позиционированный div на странице, внутри которой находится ваш div. Этот div равен x пикселям сверху и снизу экрана, поэтому ваш div исчезнет в этой точке. Это требует некоторой настройки, но это основная идея.

РЕДАКТИРОВАТЬ: Другая идея, если остальная часть контента должна быть трудноразрешимой (не покрыта div).

http://jsfiddle.net/EUL7v/1/

Поместите границу на внешний div, чтобы увидеть, как именно это работает.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...