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()); }); });