Issues with hover effect on miniprofiles

[dut]

I've added some hover effect to the miniprofiles on my forum and, rather than having it shift instantly to the text provided, I want it to either slide in or fade in slower, further down the profile. How can I make that happen?

Miniprofil template:

<!-- Mini-Profile by MissNK (Proboards Support Forum) -->

<style>

   .mp-default, .mp-hover { height: 350px; position: relative; overflow-y: off; }

</style>



<div class="$[miniprofile_class]">

 

  <!-- Default Mini-Profile -->

  <div class="mp-default">

      <span style="color:$[user.color];">$[user.name]</span><br />

          {if $[user.is_member]}

           {if $[user.is_banned]}

           user is <b>banned</b>

           {elseif $[user.is_deleted]}

           user is <b>deleted</b>

           {elseif $[user.group]}

       $[user.group.name]<br />

     

           {else}

           $[user.rank.name]<br />

       $[user.rank.stars]

           {/if}

          {elseif $[user.is_guest]}

           user is guest

          {else}

           Don't reply to this message <!-- shows in mini profile of the welcome-message -->

          {/if}

      <br />

     

     

      {if $[user.avatar]}

       <div class="avatar">

              $[user.avatar]

          </div>

      {/if}

      <br />

     

      {if $[user.is_member]}

       {if !$[user.is_banned] && !$[user.is_deleted]}

     

                  {if $[user.is_online]}

                   member is <b>online</b>

                  {else}

                   member is <b>offline</b>

                  {/if}

       {/if}

      {/if}

  </div>

 

  <!-- Hover Mini-Profile -->

  <div class="mp-hover">

     

      <!-- Place your content beneath this line -->

      <div style="text-align: left">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div><br />

     

      {if $[user.is_member] && !$[user.is_deleted]}

       <p style="text-align:left;">Total Posts: $[user.posts]

           {if $[user.gender]}<br />Gender: $[user.gender.image]</p>{/if}

      {/if}

     

      {if $[user.is_member] && !$[user.is_deleted]}

      <br /><br/>

       View <a href="$[user.link.href]">profile</a>{if !$[user.is_banned]} or send <a href="$[user.pm_href]">pm</a>{/if}

      {/if}

      <!-- Place your content above this line -->

     

  </div>

</div>



<script>

  $('.mp-hover').hide();

  $('.$[miniprofile_class]').hover(function() {

     

      $(this).find('.mp-default').hide();

      $(this).find('.mp-hover').show();

  }, function() {

      $(this).find('.mp-hover').hide();

      $(this).find('.mp-default').show();

});

</script>

[dut]

I worked my way around it. Closing the thread.