Fade and remove

let's hide the vanilla! (I shouldn't be allowed to code after 10pm)

by Umar

HTML

<p>fadeRemove</p>
<div id="breakfast">
    <div class="chocolate"></div>
    <div class="vanilla">click me!</div>
    <div class="strawberry"></div>
</div>
<p>fadeRemoveSlide</p>
<div id="dessert">
    <div class="chocolate"></div>
    <div class="vanilla">click me!</div>
    <div class="strawberry"></div>
</div>

CSS

#dessert, #breakfast {
    border: 5px solid #eee;
    margin: 0 0 30px;
}
.chocolate, .vanilla, .strawberry {
    height:40px;
}
.chocolate {
    background:#946555;
}
.vanilla {
    background: #F0F2D2;
}
.strawberry {
    background: #EFA2A9;
}

JavaScript

jQuery(document).ready(function($) {


    $.fn.fadeRemove = function() {
        $(this).fadeOut('fast', function() {
            $(this).remove();
        });
    };

    $('#breakfast .vanilla').click(function() {
        $(this).fadeRemove();
    });

    $.fn.fadeRemoveSlide = function() {
        $(this).animate({
            height: 0,
            opacity: 0
        }, 200, function() {
            $(this).remove();
        });
    };

    $('#dessert .vanilla').click(function() {
        $(this).fadeRemoveSlide();
    });

});