6 001 Скрипты / Other

Голосование на jQuery


Простая реализация анимации jQuery для создания голосования на сайте. Основная идея лишь в расширении div элемента с помощью функции анимации.

HTML

<div id="container"> 
    <span id="question">Какая ваша любимая CMS?</span> 
    <div><span>0</span><a href="">За</a>Data life engine</div> 
    <div><span>0</span><a href="">За</a>Joomla</div> 
    <div><span>0</span><a href="">За</a>Wordpress</div> 
    <div><span>0</span><a href="">За</a>NetCat</div> 
    <div><span>0</span><a href="">За</a>1C Битрикс</div> 
    <div><span>0</span><a href="">За</a>LiveStreet</div> 
</div>

CSS

Стили для Демо странички:

JS

Подключаем jQuery и анимируем DIV - при выборе "За" происходит увеличение ширины:

<script type="text/jаvascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script type="text/jаvascript"> 
$(document).ready(function() {
    $("#container div a").click(function() {
        $(this).parent().animate({
           width: '+=100px'
        }, 500);
 
        $(this).prev().html(parseInt($(this).prev().html()) + 1);
        return false;
    });
});
</script>
Скачать 970Загрузок 1,21 Kb
Демо

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи