SO - 22612263

by Arun P Johny

HTML

<select>
    <option value="4">4</option>
    <option value="8">8</option>
    <option value="16">16</option>
    <option value="32">32</option>
    <option value="64">64</option>
    <option value="128">128</option>
</select>
<p id="results"></p>
<section class="container"></section>

CSS

div {
    background-color: #FF0000;
    border-radius: 10px;
    float: left;
    height: 80px;
    margin: 5px;
    width: 80px;
}
.container {
    width:800px;
    margin-left:200px;
}

JavaScript

jQuery(function ($) {
    var run = true;
    var result = 0;

    $('select').change(function () {
        myFunction(+this.value);
    })

    function myFunction(volume) {
        $('.container').html(new Array(volume + 1).join('<div></div>'));
    }

    $('.container').append("<div></div>");

    $('.container').on('mouseenter', 'div', function () {
        if (run) {
            $(this).hide(3000, function () {
                result++;
                run = false;
                rewrite();
            });
        }

    });
})

function rewrite() {
    document.getElementById('results').innerHTML = result;
}