Слепить элемент и изменить стиль CSS в то же время

Question

Слепить элемент и изменить стиль CSS в то же время

0

Я работаю над своим портфолио и нуждаюсь в помощи для #blind элемента и изменения свойства стиля в нижнем элементе одновременно.

Идея состоит в том, чтобы существовать фиксированное пространство между двумя элементами, например, это ПРИМЕР

Если вы видите пример, когда вы нажимаете, появляется панель и пробел между двумя остается. Затем, если вы нажмете еще раз, элемент скроется, и пространство останется тем же!

"#contacts" → элемент, который я хочу ослепить

"#line" → элемент, я хочу изменить верхнее свойство

Я пытаюсь разрешить использование функции jquery под названием "blind":

   $("#contacts").toggle("blind", {direction : "vertical"}, 500);

Затем я получаю верхнее значение #line, если:

   var line = $( "#line" ); 
   var  position = line.position(); 
   var top = position.top;
   if(top == value){
   $("#line").animate({top:'100px'}, time);
   } else { ... }

Пожалуйста помоги!!

Zach Saucier 23 янв. 2014, в 22:43

Источник

1

Ваша консоль выдает какие-либо ошибки? Вы понимаете, что вам нужно импортировать jQuery и jQuery UI, чтобы это работало, верно? Можете ли вы предоставить демо вашего кода?
Zach Saucier 23 янв. 2014, в 21:33
0

Нет ошибок! Я уже разрешаю это, но не работает должным образом хорошо. Если я дважды нажму на примере космического сбоя
user1877745 23 янв. 2014, в 22:10
0

Вы получаете сообщение об ошибке ... Uncaught TypeError: Property '#<Object>' of object #<Object> is not a function
Zach Saucier 23 янв. 2014, в 22:14
0

да, но это не моя проблема "Uncaught TypeError: Свойство '# <Object>' объекта # <Object> не является функцией jquery-1.10.2.js: 9216"
user1877745 23 янв. 2014, в 22:20
0

Есть ли у вас какие-либо рамки, которые я могу использовать или любое другое решение?
user1877745 23 янв. 2014, в 22:23
0

Я отправил ответ с тем, как я это сделаю
Zach Saucier 23 янв. 2014, в 22:43

Показать ещё 4 комментария

Теги:

javascript

jquery

html5

css3

1 ответ

Ещё вопросы

Ваша консоль выдает какие-либо ошибки? Вы понимаете, что вам нужно импортировать jQuery и jQuery UI, чтобы это работало, верно? Можете ли вы предоставить демо вашего кода?
Нет ошибок! Я уже разрешаю это, но не работает должным образом хорошо. Если я дважды нажму на примере космического сбоя
Вы получаете сообщение об ошибке ... Uncaught TypeError: Property '#<Object>' of object #<Object> is not a function
да, но это не моя проблема "Uncaught TypeError: Свойство '# <Object>' объекта # <Object> не является функцией jquery-1.10.2.js: 9216"
Есть ли у вас какие-либо рамки, которые я могу использовать или любое другое решение?
Я отправил ответ с тем, как я это сделаю

Zach Saucier · Accepted Answer · 2014-01-23T19-46-00.000Z

Я бы сделал это без jQuery UI, используя top значение и z-index

var contactTop = 85,
    nextTop;
$(".oppen").click(function() {
        nextTop = nextTop !== contactTop ? contactTop : 5;
        $("#contacts").animate({top: nextTop}, 500);
    .....

демонстрация

Чтобы остановить очередь, вы можете применить ту же технику на #line в дополнение к использованию jQuery .stop

var contactTop = 85,
    nextTop,
    lineStart = 100,
    lineEnd = 180,
    lineTop = 100;
$(".oppen").click(function() {
    nextTop = nextTop !== contactTop ? contactTop : 5;
    $("#contacts").stop().animate({top: nextTop}, 500);
    lineTop = lineTop !== lineStart ? lineStart : lineEnd;
    $( "#line" ).stop().animate({top:lineTop}, 500);
});

демонстрация

Да!!! Это действительно ты -> zachsaucier.com omg
Еще один вопрос. Если дважды быстро щелкнуть по кнопке «Сбой перехода», я имею в виду поле вверх, но линия остается внизу.
@ rm596 Обновлено с исправлением для очереди. А откуда ты меня знаешь? :)
CSS трюки! Спасибо 4 починить человек
я понимаю твое решение !! изменить z index в nav и применить 2 анимации