Animatie Javascript .mouseenter en .mouseleave

by Dennis Betman

HTML

<div id="red"></div>
<div id="blue"></div>
<div id="green"></div>

<!--
.mouseenter zorgt ervoor als je, je muis over de div haalt dat er iets gebeurd.
.mouseleave zorgt ervoor als je, je muis er afhaalt er iets gebeurd.
.toggle zorgt er voor dat het item verdwijnt.
-->
Hover de kleuren en klik op de kleuren

CSS

div{
    width: 100px;
    height: 100px;
    float: left;
    margin-right: 5px;
}

#red{
    background: red;
}

#blue{
    background: blue;
}

#green{
    background: green;
}

JavaScript

$(document).ready(function(){
    $('div').mouseenter(function(){
        $(this).animate({
            height: '+=50px'
        });
    });
    $('div').mouseleave(function(){
        $(this).animate({
            height: '-=50px'
        });
    });
    $('div').click(function(){
        $(this).toggle(1000);
    });
});