Подпрыгивающие кнопки на JQuery

02012-07-1336567Денис Абдуллин

Такой эффект легко сделать на CSS, но для кроссбраузерности воспользуемся JQuery. Подпрыгивающие кнопки на JQuery – это просто ссылки, плавно поднимающиеся при наведении. Можно сделать подъем резким, чтобы кнопки как будто реально подпрыгивали. Сначала создадим плагин, который будет отнимать margin-top в CSS при наведении. Код плагина будет коротким. Нужно учесть что ссылки, не имеющие в стиле атрибут display:block не подскакивают.

Подключаем JQuery (в секцию HEAD)

Code

Код HTML

Code

<ul class="links">
  <li><a href="index.html" class="up">Facebook</a></li>
  <li><a href="index.html" class="up">Twitter</a></li>
  <li><a href="index.html" class="up">Google Plus</a></li>
</ul>

Код JavaScript

Code

Код CSS

Code

.links {margin:0;padding:0;height:50px;line-height:50px;width:350px}
.links li {margin:0;padding:0;list-style: none; float:left;margin-right:20px}

.up {padding:20px;display:block}

Демо страница

Скачать

Создать сайт в uKit Нужен классный сайт для бизнеса?
Воспользуйтесь сервисом uKit. Никакого кода!

Комментарии (7)

Порядок вывода комментариев:

Виктор Кузьменков 2013-05-22 в 15:04 / МатериалСпам

Кстать переписал скрипт, вот еще один кодик проверяйте
<script type="text/javascript">
$(document).ready(function(){
$(".up").hover(
function(){$(this).stop().animate({marginTop: '-10px'}, 200)},
function(){$(this).stop().animate({marginTop: '0px'}, 200)});
});
</script>

Виктор Кузьменков 2013-05-21 в 22:04 / МатериалСпам

kiruxaable, да возможно но на css3 и то он не везде в данный момент поддерживается отлично и лучше все же делать на jquery только не переборщить с ним