Javascript переместить div onClick

Я пытаюсь получить div #sidebar, который находится над моим основным #stream div, для перемещения из позиции left: 565px; в позицию left: 0px; onClick одного изображения в #sidebar div (красная стрелка на изображениях ниже) и сделать обратное onClick того же изображение. Я знаю, что должен использовать JavaScript, но понятия не имею, что это будет за код. Если возможно, я хотел бы также анимировать движение div.

Состояние перед кликом (стрелка будет моей ссылкой):

Состояние после нажатия: app view

Заранее спасибо!


javascript html move jquery-animate
person OliverW    schedule 23.02.2013    source источник

Ответы (2)


arrow_upward
4
arrow_downward

Если вы хотите анимировать его с помощью анимации, взгляните на это. Это должно указать вам правильное направление:

http://jsfiddle.net/3DpfJ/5/embedded/result/ — полный результат экрана

http://jsfiddle.net/3DpfJ/5/ — исходный код

Итак, я просто сделал следующее:

$(function()
{
  var expanded = false;
  $('#sidebar').click(function()
                      {
                          if (!expanded)
                          {
                              $(this).animate({'left' : '0px'}, {duration : 400});
                              expanded = true;
                          }
                          else
                          {
                             $(this).animate({'left' : '565px'}, {duration: 400});
                              expanded = false;
                          }
                      });
 });

Вероятно, это самый простой способ сделать это с помощью анимации. Длительность установлена ​​на 400, поэтому анимация займет 0,4 секунды. Отрегулируйте, как вам угодно.

Этот сценарий должен быть выполнен, как только вы загрузите страницу, чтобы убедиться, что расширение работает. Вы захотите создать тег <script type="text/javascript"></script> в заголовке и поместить туда код.

Надеюсь, это сработает для вас.

person Daniel Wardin    schedule 23.02.2013
comment
Спасибо, ваш JSFiddle выглядит именно так, как я себе представлял. Но я не могу заставить его работать в моем коде - я вызвал jQuery, поместил его в ‹head›, как вы предложили, пометил свой div тегом id=sidebar class=sidebar, и я все еще не могу получить div и js для подключения. Могу ли я иметь таблицу в div? Это единственное, о чем я могу думать. - person OliverW; 23.02.2013
comment
Да, вы определенно можете, в скрипке у меня есть плавающее право, примененное к боковой панели, я опубликую ссылку на исходный код в ответе. - person Daniel Wardin; 23.02.2013
comment
@OliverW Вот, пожалуйста, исходный код в jsfiddle опубликован в ответе, просто дважды проверьте CSS на боковой панели и т. Д. (Плавающее вправо, относительное положение), если это все еще не работает, опубликуйте свой код CSS и образец кода, и я исправлю его для ты - person Daniel Wardin; 23.02.2013
comment
Спасибо за вашу помощь! Я вставил его в Codepen, потому что он был довольно длинным, а JS работал отлично... но тот же код не работает в Safari или Chrome отдельно. Вставил обратно в Dreamweaver, все равно безуспешно. Это странно... - person OliverW; 23.02.2013
comment
@OliverW Я попробовал это в Codepen в Chrome, и здесь он отлично работает, вы пытались использовать отладчик javascript и консоль, чтобы увидеть, что происходит не так? - person Daniel Wardin; 23.02.2013
comment
У меня это работает в Codepen, но не когда я запускаю его со своего компьютера, то есть в автономном режиме. Еще раз спасибо за вашу помощь, я приму ответ, хотя у меня он не работает идеально. - person OliverW; 24.02.2013
comment
@OliverW большое спасибо, вы пытались открыть консоль и попытаться проверить поведение и посмотреть, возникают ли какие-либо ошибки? Работает ли js вообще в автономном режиме на вашем компьютере? - person Daniel Wardin; 24.02.2013
comment
Он не работает в автономном режиме - не знаю почему, но у меня он работает онлайн! Здесь (размер области просмотра будет 640 x 855 пикселей). Еще раз спасибо! - person OliverW; 24.02.2013

arrow_upward
1
arrow_downward

jquery использует переключатель, чтобы справиться с этим. Он работает лучше, чем обычная «анимация», потому что объединяет скрытие и отображение в одну функцию (переключатель).

Возможно, вам придется внести некоторые изменения в соответствии с вашими потребностями, но это должно помочь вам начать работу:http://jqueryui.com/toggle/

person PCoelho    schedule 23.02.2013