Доброго времени суток.

Написал небольшой плагинчик, который представляю вам.

Задача: в полях инпута писать текст что там должно быть и который по клику мышки пропадает.
т.е в инпуте написано «введите email» при нажатии на него нужно чтобы текст пропал, а если снова текст отсутствует — показать значение которое было.

Данный функционал полезен особенно в формах регистрации, где удобно в формах показать пример формата вводимых данных.

Так же: при клике, чтобы текст пропадал плавно, как бы уходил в цвет фона.

Что из этого вышло — смотрите здесь (демонстрация).

Скачать можно здесь

На HTML-страницах многих сайтов существуют гиперссылки наподобие <a href="#idName">...</a>, которые ведут не на другую страницу, а к некоторому месту на той же сáмой странице, где и ссылка. Это обычное дело для обширных статей с оглавлением (если каждый пункт оглавления является такой гиперссылкою, которая ведёт к названному в нём заголовку) или с примечаниями (если надстрочный знак примечания служит гиперссылкою и ведёт к примечанию в конце текста, а от примечания стоит гиперссылка в обратном направлении). Таких статей немало в сетевых энциклопедиях (вики, например) или в серьёзных сетевых журналах.

К сожалению, переход по такой внутренней гиперссылке в большинстве современных браузеров Паутины совершается мгновенно, ничуть не заметно для читателя. Это совсем не то, что проматывание страницы вручную, которое происходит плавно и занимает некоторое (заметное взору) время, так что даёт читателю некоторое представление об объёме того текста, мимо которого он пролетает.

Досадно, не правда ли?

К счастью, существует плагин для jQuery, который позволяет невозбранно достичь желаемого, то есть без труда обратить всякий переход по внутренней гиперссылке документа именно в такое проматывание, во всём подобное ручному, но только совершаемое автоматически и за достаточно краткое время (по умолчанию — за секунду), так что читатель как раз успевает осознать происходящее и оценить направление проматывания и пройденное расстояние, но ещё не успевает заскучать.

Этот плагин называется jQuery.LocalScroll, и он, окромя jQuery, потребует для своей работы ещё другой плагин (jQuery.ScrollTo), обёрткою для которого является. Так что достаточно установить jQuery и оба эти плагина — и тогда в дальнейшем вызов функции, включающей автоматическое проматывание для всех внутренних гиперссылок, станет можно записывать как нельзя проще:

$($.localScroll());

Вроде бы всё хорошо. Но проблема в том, что по умолчанию такое проматывание является просто проматыванием: документ прокручивается в окне у читателя, и больше ничего.

Тут попался мне один дизайн при котором была так сказать прокрутка картинок. Проблема состояла в том что картинки, которые надо было менять верстальщик разместил как background: url() blablabla. И тут начались проблемы :)

• Мы не можем в jQuery(и не только в нем) делать эффекты на эту картинку, например тот же fadeOut.
• Замена картинки получается слишком долгой за счет того что картинки не подгружены еще, а дополнительно это делать не хотолось бы, тем более что эффектов нету :)

И что же делать? Долго думали с дизайнером, как выбраться из этой ситуации.
И придумали!

• Можно подгрузить ОДНУ картинку, которая будет содержать в себе все остальные — это решает проблему с подгрузкой картинок.
• Эффект все таки можно делать, если менять позицию БОЛЬШОЙ картинки, что бы показывать как бы маленькую нужную.

Но не все так легко как кажеться. Вот следующие проблемы с которыми пришлось столкнуться:

• В Opere и Firefox не поддерживается свойство background-position-x(y)
• Вторая проблема состоит в том что если во время плавной прокрутки мы снова кликнем на показ следующей картинки, то у нас получиться смещение

В итоге что получилось, всё на гитхабе.
Я думаю по его коду можно легко разобраться как он работает и какие у него опции. Просто уставший и уже нету сил писать к нему ридми.

ЗЫ Добавил пример на гитхаб и на сайт себе его закинул.
ЗЫЫ Для работы нужен плагин timers.