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

32 981 любопытных

Здравствуйте, дорогие читатели блога. Сегодня мы с Вами узнаем как сделать плавное изменение цвета блока с помощью 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 и так далее.

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