Edit in JSFiddle

div {
    height: 50px;
    width: 100px;
    background-color: cornflowerblue;
    border: black solid 1px;
    text-align: center;
    line-height: 50px;
}
.wrapper {
    height: 50px;
    width: 100px;
    padding: 10px;
    background: white;
    display: inline-block;
    overflow: hidden;
}

<div class="wrapper">
    <div id="blind">BLIND</div>
</div>
<div class="wrapper">
    <div id="bounce">BOUNCE</div>
</div>
<div class="wrapper">
    <div id="clip">CLIP</div>
</div>
<div class="wrapper">
    <div id="drop">DROP</div>
</div>
<div class="wrapper">
    <div id="explode">EXPLODE</div>
</div>
<div class="wrapper">
    <div id="fade">FADE</div>
</div>
<div class="wrapper">
    <div id="fold">FOLD</div>
</div>
<div class="wrapper">
    <div id="highlight">HIGHLIGHT</div>
</div>
<div class="wrapper">
    <div id="puff">PUFF</div>
</div>
<div class="wrapper">
    <div id="pulsate">PULSATE</div>
</div>
<div class="wrapper">
    <div id="scale">SCALE</div>
</div>
<div class="wrapper">
    <div id="shake">SHAKE</div>
</div>
<div class="wrapper">
    <div id="slide">SLIDE</div>
</div>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

$(function () {
    $('.wrapper').click(function () {
        var div = $(this).children().first();
        var effect = div.text().toLowerCase();
        console.log(div);
        console.log(effect);
        div.toggle(effect);
        //.toggle(this.text().toLowerCase());
    });
});