jquery - How to apply effect to element when it gets attached to dom? -

i using following jquery bounce effect:

(function($){      /* plugin extends jquery core 4 methods */      /* converting element bounce box: */     $.fn.bouncebox = function(){          /*             applying css rules center             element in middle of page ,             move above view area of browser.         */          this.css({             top     : -this.outerheight(),             marginleft  : -this.outerwidth()/2,             position    : 'fixed',             left        : '50%'         });          return this;     }      /* boxshow method */     $.fn.bounceboxshow = function(){          /* starting downward animation */          this.stop().animate({top:0},{easing:'easeoutbounce'});         this.data('bounceshown',true);         return this;     }      /* boxhide method */     $.fn.bounceboxhide = function(){          /* starting upward animation */          this.stop().animate({top:-this.outerheight()});         this.data('bounceshown',false);         return this;     }      /* , boxtoggle method */     $.fn.bounceboxtoggle = function(){          /*             show or hide bouncebox depending             on 'bounceshown' data variable         */          if(this.data('bounceshown'))             this.bounceboxhide();         else             this.bounceboxshow();          return this;     }  })(jquery); 

on following dynamic div loaded dynamically:

<div id="growl">     <span id="growl-title" class="growl-title"></span>     <span id="growl-content" class="growl-content"></span> </div> 

currently effect works follows: user clicks button callback javascript executed after server side completed show div effect follows:

$('#growl').bounceboxtoggle();  

but have case server side show div based on attribute (div may gets attached dom result of ajax call) follows:

<c:if test="#{showgrowl==true}"> <div id="growl">         <span id="growl-title" class="growl-title"></span>         <span id="growl-content" class="growl-content"></span> </div> </c:if> 

, , want in case when div shown apply bounce effect automatically, please advise how that.

i can't understand exactly, if u need execute script along div block, u can embed script block inside if condition. whenever condition true, script gets executed.

<c:if test="#{showgrowl==true}">     <div id="growl">         <span id="growl-title" class="growl-title"></span>         <span id="growl-content" class="growl-content"></span>     </div>     <script>         $(function(){ // making onload function             $('#growl').bounceboxtoggle();         })     </script> </c:if>