сделать слайд вниз, не нажимая вниз - PullRequest
5 голосов
/ 18 мая 2011

у меня есть экзамен ЗДЕСЬ

Я не уверен, как сделать div скользящим вниз, но удерживая содержимое наверху, а не скользить вниз, когда div скользит вниз.

Не могли бы вы помочь мне с этим?

Ответы [ 2 ]

10 голосов
/ 18 мая 2011

Вы имеете в виду что-то вроде этого?

http://jsfiddle.net/yGZHC/3/

Если это так, используйте position:absolute. Таким образом, положение элемента не влияет на положение других элементов.

РЕДАКТИРОВАТЬ: В зависимости от того, что вы пытаетесь сделать, relative может быть лучше.

http://jsfiddle.net/yGZHC/5/

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

http://jsfiddle.net/yGZHC/7/

$('#slidenav').animate({
    top: '-'+$(this).height()
}, 200);

$('#open a').toggle(
    function(){
        $('#slidenav').animate({
            top: '0'
        }, 500);
    },
    function(){
        $('#slidenav').animate({
            top: '-4'+$(this).height()
        }, 500);
});
4 голосов
/ 18 мая 2011

Я исправил то, что, как мне кажется, вы просите.

http://jsfiddle.net/yGZHC/2/

Прежде всего, переместите контент ниже того, над чем вы хотите быть:

<div id="open">
  <a href="#">slide</a>
</div>
<div id="holder">
  <div id="header">
    <h1>TITLE HERE</h1>
  </div>
  <div id="contact">
  </div>
</div>
<div id="slidenav">
....

Тогда, просто увеличьте slidenav еще немного, чтобы компенсировать.Вы можете даже полностью скрыть div, пока не нажмете кнопку показа.

$(document).ready(function() {
  $('#slidenav').animate({
    marginTop: '-480px'
  }, 200);
  $('#open a').toggle( function(){
    $('#slidenav').animate({
      marginTop: '0'
    }, 500);
  },
  function(){
    $('#slidenav').animate({
      marginTop: '-380px'
    }, 500);
  });
});
...