2013-05-19 2 views
2

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

Это мой JQuery:

$(document).ready(function() { 
    $('#MoveMe').click(function() { 
     $('#MoveMe').animate({ 
      marginTop: "+=1000px" 
     }, 1500); 
    }); 
}); 

это мой CSS:

#MoveMe { 
    height: 200px; 
    width: 200px; 
    margin: 10px, 30px; 
    background-color: blue; 
    text-align: center; 
    z-index: 1; 
    cursor: pointer; 
} 

#NoMove { 
    z-index: 2; 
    margin-top: 20px; 
} 

Header { 
    position: absolute; 
} 

это тело моего HTML:

<body> 

    <Header> 
     <div id = "MoveMe"> 
      <p> Hello </p> 
     </div> 

     <div id = "NoMove"> 
      hi 
     </div> 
    </Header> 

    <script src= "jquery.js" ></script> 
    <script src= "jqueryPage.js" ></script> 

</body 
+2

Вам нужно будет использовать 'position: absolute;' – PitaJ

+1

Использование: '#MoveMe { position: absolute; } ' – Joe

ответ

2

Попробуйте position: absolute; на #MoveMe элемента.

+0

Позиция абсолютная - путь. Но я бы также добавил, что вы также должны использовать анимацию ключевого кадра вместо использования интервалов JavaScript для выполнения анимации. Проверьте эти предварительно подготовленные анимации для хорошей справки http://daneden.me/animate –

Смежные вопросы