Как переместить весь элемент div вверх на x пикселей?

Question

Я хочу переместить весь div и его содержимое до 10-15 пикселей.

Как я могу это сделать?

Примечание: это элемент слайдера, поэтому, когда я нажимаю кнопку, слайдер скользит вниз. Как только он закончится, я хочу изменить его на 15 пикселей.

Answer 1

$('#div_id').css({marginTop: '-=15px'});

Это изменит CSS для элемента с идентификатором "div_id"

Чтобы получить желаемый эффект, я рекомендую добавить приведенный выше код к функции обратного вызова в вашей анимации (таким образом, divбудет перемещен вверх после завершения анимации):

$('#div_id').animate({...}, function () {
    $('#div_id').css({marginTop: '-=15px'});
});

И, конечно, вы можете анимировать изменение поля следующим образом:

$('#div_id').animate({marginTop: '-=15px'});

Вот документы для .css()в jQuery: http://api.jquery.com/css/

А вот документы для .animate() в jQuery: http://api.jquery.com/animate/

Answer 2

$('div').css({
    position: 'relative',
    top: '-15px'
});

Answer 3

В CSS добавьте это к элементу:

margin-top: -15px; /*for exact positioning */
margin-top: -5%; /* for relative positioning */

Вы можете использовать любой из них, чтобы позиционировать соответственно.