Изменение «верхнего» CSS элемента с абсолютным позиционированием с помощью jQuery click

Question

У меня есть div (#slider), который я использую position: absolute; чтобы позволить ему охватить ширину экрана, не нарушая мой код оболочки. Тем не менее, у меня есть меню, которое переключается при нажатии на «рабочий» div с помощью jQuery slideToggle. Я хотел бы настроить свойство top для элемента с абсолютным позиционированием, чтобы оно двигалось вниз, когда мое меню опускалось.

Это можно посмотреть в прямом эфире на http://osephj.com/dev/

Все это использует адаптивные медиазапросы, поэтому очевидно, что CSS, запускаемый кликом через jQuery, должен иметь медиазапросы, чтобы верхняя позиция подходила для всех размеров экрана.

Прямо сейчас код, который я имею для переключения меню, таков:

    <script type="text/javascript">
 $(document).ready(function() {
$('#worktoggle').click(function(){
     $('div.slider').css('top', 700);
     $('div.work').slideToggle(600,'swing');
     return false;
   });
});
</script>

Теперь это перемещение .slider div, но мне нужно иметь возможность изменять значение для каждого размера носителя. Кроме того, я хотел бы, чтобы это соответствовало переходу "колебания" на скорости 600, с которой открывается меню. По сути, как бы это действовало, если бы это был блочный элемент, который следовал за моим «рабочим» UL в том же родительском элементе.

Answer 1

css метод, вероятно, то, что вы ищете.

$('#').css('top', 1000);

или addClass и removeClass , чтобы добавить собственный класс к элементу.

Возможно, вы захотите взглянуть на анимационный метод slideDown для перехода.

Вы хотите добавить этот код в функцию щелчка, поскольку хотите, чтобы он изменился при нажатии.

$('#worktoggle').click(function(){
    $('div.toMove').css('top', 100);
    $('div.work').slideToggle(600,'swing');
     return false;
});