Как плавно поменять цвет блока (элемента) при наведении с помощью CSS и JQuery

Разместил / Просмотров: 25 070 / комментариев 8

Здравствуйте, дорогие читатели блога. Сегодня мы с Вами узнаем как сделать плавное изменение цвета блока с помощью CSS и JQuery. С помощью данного плагина можно добиться удивительно красивых результатов оформления. Например, можно сделать клёвое меню, которое будет плавно менять цвет при наведении, и поверьте, смотрится это очень красиво.

Посмотреть пример

И так, давайте начнём. Для начала нужно создать самые обычные блоки с помощью CSS, которые будут иметь разрешение 500 на 50 пикселей:

CSS

Придумываем класс будущему блоку, например Box:

.Box {

margin-bottom:15px;

width:500px;

height: 50px;

background-color: #ffffff;

position:relative;

text-align: center;

border: 1px solid #D4D4D4;

padding:20px 40px;

}

Получиться у нас должно примерно следующее:

Теперь самое интересное. Нам нужно, чтобы при наведении на этот блок курсором он плавно менял на заданный цвет. Делать мы это будем с помощью JQuery.

JQuery

Для начала между тегами <head> и </head> нужно поставить следующее:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>

Затем опять же между тегами <head> и </head> копируем вот этот скрипт:

<script type="text/javascript">
 $(document).ready(function(){
 $(".Box").hover(function() {
 $(this).stop().animate({ backgroundColor: "#FF4500"}, 400);
 },function() {
 $(this).stop().animate({ backgroundColor: "#ffffff" }, 400);
 });
 });
 </script>

Где .Box — это класс блока, который мы придумали выше в CSS.

«#FF4500» — цвет при наведении. 400 — скорость анимации при наведении.

«#ffffff» — исходный цвет после убирания курсора. 400 — скорость анимации при убирании курсора.

HTML

После того когда Вы всё сделаете как написано выше, цвет блока плавно будет меняться. Чтобы такой блок вставить на страницу, нужно просто добавить следующее в нужное место:

<div class="Box"></div>

И блок появится.

Посмотреть пример

Важно

Данный плагин может менять только цвет фона (бекграунд). Например к ссылкам или к тексту его прикрепить не получится. Цвет ссылок меняет другой плагин (скоро обязательно напишу как сделать).

Если Вам захочется сделать чтобы блоки на странице были разного цвета, как у меня в примере, Вам нужно будет между тегами <head> и </head> поставить несколько скриптов подряд и соответственно не забыть поменять цвет на желаемый. Самое главное нужно поменять класс, например в нашем примере выше — класс Box, а следующий скрипт должен быть с другим классом, например Box1, затем Box2 и так далее.

Вот и всё, дорогие друзья. Если Вам что либо будет не понятно, обязательно спрашивайте в комментариях. До скорых встреч.

  • Дмитрий Баушев прав, действительно резко меняется — это даже немного раздражает. Я пробовал в опере последней и хроме. Если есть возможность уменьшить скорость анимации, тогда будет как раз

  • Евгений, тут стоит стандартная скорость анимации — 400. Её можно изменять как Вам угодно.

  • Если честно, я к Вам попал совсем по другим целям, но любопытство победило — пошел посмотреть )) Меня больше интересуют выпадающие блоки на jquery ибо у меня ооооочень высокая страница получается (видел Вас в посетителях на сайте, так что думаю Вы на этот момент обратили внимание).

  • Евгений, я так понял, что Вы хотите часть контента на странице скрыть в выпадающих блоках? Честно я, например, против этого, потому что большая часть посетителей не будет нажимать на эти блоки, соответственно скрытый контент не увидит.

    Да, я заходил на Ваш сайт. В принципе главная не сильно перегружена, спасает оформление сайта. Голубые и светлые тона всегда были приятными для глаза. Я бы оставил всё как есть. Но хозяин — барин :-)

  • Хозяин в работе 20 часов в сутки, очень многое хотелось бы изменить, но руки не доходят, а найти нормальных помощников сегодня сложно. Сайт делал максимально просто, все своими руками — позже обработаю напильником, будет хорошо.

    Я вышел из положения слайдерами на coda slider (пример — kirkat.com.ua/permskiy.html ). Очень удобно и можно отслеживать интересы пользователей. На скрине сразу видно — запрос «мебель в кредит» будет оооочень популярен: prntscr.com/qvutg

  • Александр, а если не div, a input. У меня input class=»button»б и скрипт не срабатывает. На div — все замечательно.

  • Максим, извините, но по поводу скриптов я ничего не могу подсказать :(

  • Ничего, я решил проблему голым css. :)