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

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

13.07.201222627

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

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

Code
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>


Код 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
<script type="text/javascript">
$.fn.upHover = function () {  
  return $(this).hover(  
  function(){$(this).stop().animate({marginTop: '-10px'}, 200)},  
  function(){$(this).stop().animate({marginTop: '0px'}, 200)}  
  );  
}  

$(".up").upHover();  
</script>


Код 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}



Сохраните в социальную сеть
Комментарии (7)
Спасибо!
0
Vladimir Dukhovnik 04.08.2012 в 12:49Спам
текст подпрыгивает, нет фона, вот как получилось: http://da.am/i/5306/
Что не так?
0
alex_D у тебя кривые руки, я поставил все работает
0
скрипт прикольный и легок в понятии ток в css не указан фон для кнопок
0
хотя, сейчас это возможно на css
0
kiruxaable, да возможно но на css3 и то он не везде в данный момент поддерживается отлично и лучше все же делать на jquery только не переборщить с ним
0
Кстать переписал скрипт, вот еще один кодик проверяйте
<script type="text/javascript">
$(document).ready(function(){
$(".up").hover(
function(){$(this).stop().animate({marginTop: '-10px'}, 200)},
function(){$(this).stop().animate({marginTop: '0px'}, 200)});
});
</script>
0
Чтобы оставить комментарий под этой публикацией,
зарегистрируйтесь или войдите.
Рейтинг лучших сервисов для самостоятельного создания сайта.
Лучшие конструкторы
Легко! Если пользоваться нашими советами.
Создать сайт