Основные jQuery: нажмите кнопку, чтобы сдвинуть текстовую панель с экрана, нажмите другую кнопку, чтобы сдвинуть ее обратно на экран - PullRequest
Новая
       22

Основные jQuery: нажмите кнопку, чтобы сдвинуть текстовую панель с экрана, нажмите другую кнопку, чтобы сдвинуть ее обратно на экран

0 голосов
/ 15 февраля 2012

Я поддерживаю веб-сайт с полноэкранными фоновыми фотографиями и текстовой панелью поверх фотографий.

Вот функции, которые я хочу добавить:

Нажатие "Скрыть текст"Кнопка "оживляет текстовую панель слева от экрана, чтобы посетители могли видеть всю фоновую фотографию.Кнопка «Скрыть текст» после нажатия должна исчезнуть, а другая кнопка «Показать текст» исчезнет в другом месте.Когда нажата кнопка «Показать текст», текстовая панель должна анимироваться из-за рамки слева на свое место.Одновременно кнопка «Показать текст» должна исчезнуть, а кнопка «Скрыть текст» должна исчезнуть.

Чтобы перефразировать ее:

при нажатии #hideText,

aimate#mainPanel остается за кадром, исчезает #hideText, исчезает в #showText.

при нажатии #showText

анимировать #mainPanel из текущей позиции, оставив за кадром на свое место на экране, исчезнуть #showText, исчезнуть # hideText

Может кто-нибудь показать мне, как это сделать с помощью jQuery?Я был бы очень благодарен за реальный код.

Ответы [ 2 ]

1 голос
/ 15 февраля 2012

http://jsfiddle.net/dXSPa/

$('#hideText').click(function(){
    $('#mainPanel').animate({width:'toggle'},1000);
    $(this).fadeOut();
    $('#showText').fadeIn();
});
$('#showText').click(function(){
    $('#mainPanel').animate({width:'toggle'},1000);
    $(this).fadeOut();
    $('#hideText').fadeIn();
});
​

и html (только для примера) 

<div id='mainPanel' 
      style='position:absolute; left: 0px; top: 50px; 
            border: 1px solid black; white-space: nowrap'>Main Panel</div>
<input type='button' id='hideText' value='Hide Text'
       style='position:absolute;left:0px'>
<input type='button' id='showText' value='Show Text' 
       style='display:none; position:absolute;right:0px;'>

, если вам не нравится эффект ширины, его можно легко изменить для слайда изв левой части экрана, например, http://jsfiddle.net/3FwWV/

пс: для кнопки справа - нажмите кнопку, а не интервал jsfiddle со словом «Результат»

1 голос
/ 15 февраля 2012

http://jqueryui.com/demos/hide/

Проверьте эффект слайда и его реализацию здесь.

...